问题描述
我有一个小的angularjs函数,该函数在其change事件上获取下拉菜单的会议ID值。会议名称用作显示值。
下拉列表的值来自页面加载时填充的数组。
我现在还需要从数组中获取另外2个值,以便以后在代码中使用。
我正在尝试按照与会议ID相同的方式添加变量分配类型,但我无处可寻,未分配值。
这是功能:
$scope.GetValue = function (meeting) {
$scope.meetingId = $scope.selectedMeeting;
$scope.meetingName = $.grep($scope.MeetingList,function (meeting) {
// These are the 2 new variables
meeting.MeetingDate == $scope.meetingDate;
meeting.MeetingTitle == $scope.meetingTitle;
return meeting.MeetingID == $scope.meetingId;
})[0].MeetingName;
console.log("Selected MeetingID: " + $scope.meetingId + "\nSelected Meeting Date - Title: " + $scope.meetingName + + "\nSelected Meeting Title: " + $scope.meetingTitle + "\nSelected Meeting Date: " + $scope.meetingDate); $scope.GetValue = function (meeting) {
$scope.meetingId = $scope.selectedMeeting;
$scope.meetingName = $.grep($scope.MeetingList,function (meeting) {
// These are the 2 new variables
meeting.MeetingDate == $scope.meetingDate;
meeting.MeetingTitle == $scope.meetingTitle;
return meeting.MeetingID == $scope.meetingId;
})[0].MeetingName;
console.log("Selected MeetingID: " + $scope.meetingId + "\nSelected Meeting Date - Title: " + $scope.meetingName + + "\nSelected Meeting Title: " + $scope.meetingTitle + "\nSelected Meeting Date: " + $scope.meetingDate);
};
};
这是HTML,我将其包括在内只是为了展示如何在下拉列表中获取值
<label for="meeting-list">Current Available Meetings</label>
<select ng-model="selectedMeeting" ng-change="GetValue()" ng-disabled="form.$invalid || !email" >
<option ng-repeat="meeting in MeetingList" value="{{meeting.MeetingID}}">Meeting: {{meeting.MeetingName}}</option>
<option value="">--Select Meeting--</option>
</select>
能否获得一些帮助以正确进行此添加?
谢谢, 伊拉斯莫。
解决方法
我认为您的代码中$.grep
的使用存在问题。
它无法修改element参数(此处为meeting
),但会过滤并返回匹配的元素。
还不确定您是否错误地拼写了变量名(在JS !!中区分大小写)MeetingName
,MeetingTitle
,MeetingDate
和MeetingID
。在您的范围内,它们都以小写开头。
您可以使用JavaScript filter()
method on your array来获取选定的会议。
angular.module('myApp',[])
.controller('ExampleController',['$scope',function($scope) {
$scope.meetings = [
{ id: 1,title: 'First',date: '2020-09-01' },{ id: 2,title: 'Second',date: '2020-09-02' },{ id: 3,title: 'Third',date: '2020-09-03' }
];
$scope.meetingIdSelected = $scope.meetings[0].id;
$scope.pickMeeting = function() {
console.log("selected",$scope.meetingIdSelected);
$scope.selectedMeeting = $scope.meetings.filter(function (m) {
return m.id === $scope.meetingIdSelected;
})[0];
console.log("found",$scope.selectedMeeting);
};
}]);
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="ExampleController">
<select ng-model='meetingIdSelected' ng-change="pickMeeting()" required ng-options='m.id as m.title for m in meetings'></select>
<hr>
selected:
<tt>{{selectedMeeting}}</tt><br />
</div>
</body>