javascript - 如何通过 AngularJS 从选择元素中获取对象

Question

我有这样的 select 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 - 所选选项的“值”属性，groupName - “文本”属性。

我如何使用 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}}

where ctrl - 我的 Controller 带有 groupList 数组和 studentGroup 对象；studentGroup - 根据需要选择对象。

Answer 1

你好，我做了一个例子，使用 <select> element ,json array object to load values, custom directive 监听变化事件并调用 Controller 函数 给选定对象。

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) {
      }

    }
  });