javascript - ng-重复中的 ng-模型；获取 ng-model 的值

Question

我有以下奇怪的情况 - Controller 片段 -

$scope.filterNum = {0: 'filterVal1', 1: 'filterVal2', 2: 'filterVal3', 3: 'filterVal4', 4: 'filterVal5', 5: 'filterVal6',
                    6: 'filterVal7', 7: 'filterVal8', 8: 'filterVal9', 9: 'filterVal10', 10: 'filterVal11', 11: 'filterVal12',
                    12: 'filterVal13', 13: 'filterVal14', 14: 'filterVal15', 15: 'filterVal16', 16: 'filterVal17', 17: 'filterVal18'};

$scope.operatorNum = {0: 'operatorVal1', 1: 'operatorVal2', 2: 'operatorVal3', 3: 'operatorVal4', 4: 'operatorVal5', 5: 'operatorVal6',
                    6: 'operatorVal7', 7: 'operatorVal8', 8: 'operatorVal9', 9: 'operatorVal10', 10: 'operatorVal11', 11: 'operatorVal12',
                    12: 'operatorVal13', 13: 'operatorVal14', 14: 'operatorVal15', 15: 'operatorVal16', 16: 'operatorVal17', 17: 'operatorVal18'};
$scope.getNumber = function(num) {
    return new Array(num);   
};

HTML 片段

 <div class="row" ng-repeat="i in getNumber(18) track by $index">
        <div class="col-md-3">
        <select class="form-control" ng-model="filterNum[$index]">
            <option ng-repeat="filter in filters" value="{{filter}}">{{filter}}</option>                
        </select>
        </div>                                  
        Hello {{filterNum[$index].value}}
    </div>              

所以我想要的是打印 Hello (value selected in select control) 但是当前表达式什么都不打印。

不过我已经提到了这个问题this question

Answer 1

使用 {{ filterNum[$index] }} 代替 {{filterNum[$index].value}}。

并且，我为 filters 变量使用了虚拟值。

请看下面的代码。

var app = angular.module('app', []);


app.controller('ctrl', function($scope) {
  $scope.filterNum = {
    0: 'filterVal1',
    1: 'filterVal2',
    2: 'filterVal3',
    3: 'filterVal4',
    4: 'filterVal5',
    5: 'filterVal6',
    6: 'filterVal7',
    7: 'filterVal8',
    8: 'filterVal9',
    9: 'filterVal10',
    10: 'filterVal11',
    11: 'filterVal12',
    12: 'filterVal13',
    13: 'filterVal14',
    14: 'filterVal15',
    15: 'filterVal16',
    16: 'filterVal17',
    17: 'filterVal18'
  };

  $scope.operatorNum = {
    0: 'operatorVal1',
    1: 'operatorVal2',
    2: 'operatorVal3',
    3: 'operatorVal4',
    4: 'operatorVal5',
    5: 'operatorVal6',
    6: 'operatorVal7',
    7: 'operatorVal8',
    8: 'operatorVal9',
    9: 'operatorVal10',
    10: 'operatorVal11',
    11: 'operatorVal12',
    12: 'operatorVal13',
    13: 'operatorVal14',
    14: 'operatorVal15',
    15: 'operatorVal16',
    16: 'operatorVal17',
    17: 'operatorVal18'
  };


  $scope.filters = [
    "filterVal1",
    "filterVal2"
  ];


  $scope.getNumber = function(num) {
    return new Array(num);
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div class="row" ng-repeat="i in getNumber(18) track by $index">
    <div class="col-md-3">
      <select class="form-control" ng-model="filterNum[$index]">
        <option ng-repeat="filter in filters" value="{{filter}}">{{filter}}</option>
      </select>
    </div>Hello {{filterNum[$index]}}</div>
</div>