javascript - ng-options - 用 vm 替换 $scope

Question

我有以下工作代码:

<select ng-model="setPriceClass" 
    ng-options="price as price.label for price in priceClass">
</select>

function ExampleCtrl($scope) {

    $scope.priceClass = [
      {'label': 'label1', 'value': '1'},
      {'label': 'label2', 'value': '2'},
      {'label': 'label3', 'value': '3'},
      {'label': 'label4', 'value': '4'}
    ];
    $scope.setPriceClass = $scope.priceClass[0];

}

在 ng-route 中:以 ExampleCtrl 为例

我的 priceClass 对象显示在选择字段中。现在我想使用“vm”。而不是“$scope”。但无法让它在我的选择字段中显示 priceClass。

尝试了以下方法:

<select ng-model="example.setPriceClass" 
    ng-options="price as example.price.label for price in example.priceClass">
</select>

function ExampleCtrl() {
    var vm = this;

    vm.priceClass = [
      {'label': 'label1', 'value': '1'},
      {'label': 'label2', 'value': '2'},
      {'label': 'label3', 'value': '3'},
      {'label': 'label4', 'value': '4'}
    ];
    vm.setPriceClass = vm.priceClass[0];

}

如何正确设置 ng-options？

Answer 1

需要修改路由配置，添加controllerAs属性:

.when('/prices', {
    templateUrl: 'path/example.html',
    controller: 'ExampleCtrl',
    controllerAs: 'example'
})

然后在模板中:

<select ng-model="example.setPriceClass" 
    ng-options="price as price.label for price in example.priceClass">
</select>