如何通过AngularJS

Question

我有选择这样的html元素：

<select required="" ng-model="studentGroup">
<option value="" selected="">--select group--</option>
<option value="1">java 15-1</option>
<option value="2">java 15-2</option>
<option value="3">java 15-3</option>
</select>

我想要一个对象 - studentGroup: {groupId:'1', groupName:'java 15-1'} 当选择第一个选项时（例如）， 其中 groupId - 所选选项的'value'属性， groupName - 'text'属性。

如何使用AngularJS

执行此操作

更新

解决方法如下：

<select ng-options="group.groupName for group in ctrl.groupList track by group.groupId" ng-model="ctrl.student.studentGroup"></select>
Selected studentGroup object: {{ctrl.studentGroup}}

其中 ctrl - 我的控制器带有 groupList 带有 studentGroup 对象的数组; studentGroup - 根据需要选择对象。

Answer 1

这可以通过角度的ng-options指令来实现。通过在数组中声明选择下拉列表的值并在ng-options指令

的帮助下迭代它

$scope.studentGroups = [{
  id: 1,
  groupName: 'java 15-1'
}, {
  id: 2,
  groupName: 'java 15-2'
}];


<select ng-options="studentGroup as studentGroup.groupName for studentGroup in studentGroups track by studentGroup.id" ng-model="selected"></select>

Answer 2

怎么样：

$scope.studentGroup = [
    { groupId: 1, groupName: 'java 15-1'},
    { groupId: 2, groupName: 'java 15-2'},
    { groupId: 3, groupName: 'java 15-3'},
    { groupId: 4, groupName: 'java 15-4'}
];

<select 
    ng-options="p.groupId + ' ' + p.groupName for p in studentGroup" ng-model="selectedPerson">
</select>

Demo

Answer 3

您好我做了示例使用 <select>元素， json数组对象加载值，自定义指令侦听更改事件，调用控制器函数 给出所选对象。

plunkr示例：http://plnkr.co/edit/iCS0blQjceA4tIIb8bUV?p=preview

进入html

{{selectedObj}}
<div class="col-xs-12 form-control"
         change-hall="filterHall(value)"
         items=items
         event-halls-list
         model='selectedObj'>

   </div>

自定义指令（根据需要命名）

.directive('eventHallsList', function($timeout, $log, $http, $compile) {
    return {
      restrict: 'AE',
      replace: true,
      scope: {
        changeHall: '&',
        items: '=',
        model: '='
      },
      templateUrl: 'mytemplate.tpl.html',
      link: function(scope, element, attrs) {
      }

    }
  });

Answer 4

您可以将角度select directive与ng-options一起使用。这样，您可以将任意对象作为值提供。