AngularJS如何在下拉菜单中获取多个值更改值

问题描述

我有一个小的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 !!中区分大小写)MeetingNameMeetingTitleMeetingDateMeetingID。在您的范围内,它们都以小写开头。

您可以使用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>

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...