javascript - 如何使用 angularjs 在 html 中索引变量

Question

我是 AngularJS 的新手，仍在学习该语言。 我在 html 中创建了一个选择框，我想用 Controller 中的变量填充它。

我可以使用 {{variablename}} 获取 html 中的变量，但无法获取其中的子对象。 请查看我的代码here .
您可以看到它在 html 中显示“repeatSelect”，但如果我尝试索引其中的对象，它不会显示。(getID 始终为空)

Controller 有一个 $scope 变量，如下

controller('ExampleController', ['$scope', function($scope) {
    $scope.repeatSelect = null;
    $scope.data = {
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ],
    };
 }]);

在html代码中，

<tt>repeatSelect = {{repeatSelect}}</tt><br/>
  <tt>getID = {{repeatSelect.id}}</tt><br/>

repeatSelect 工作正常，但repeatSelect.id 不行。

请指导

Answer 1

使用ng-options内置指令代替 https://docs.angularjs.org/api/ng/directive/ngOptions .

它专门设计用于处理 HTML 选择列表，并具有大量强大的选项。

<div ng-controller="ExampleController">
    <label> Repeat select: </label>
    <select ng-options="option as option.name for option in data.availableOptions track by option.id" ng-model="repeatSelect"></select>
  <hr>
  <tt>repeatSelect = {{repeatSelect}}</tt><br/>
  <tt>getID = {{repeatSelect.id}}</tt><br/>
</div>

请在此处查看 plunkr:http://plnkr.co/edit/kIcH5fF7suhN0rhVDez8?p=preview