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>

ng-options - 用vm替换$ scope

1 个答案: