Question

我正在浏览Angularjs tuts and docs given in the official angularjs website.

这里我们添加一个用于订购的选择框，例如

  <select ng-model="orderProp">
   <option value="name">Alphabetical</option>
   <option value="age">Newest</option>
  </select>

在控制器中，我们指定$scope.orderProp = "age"这样可以正常工作，“最新”将是默认的选择选项。

然后我尝试将订单商品放到模型中，然后像这样使用ng-repeat填充选择框。

  <select ng-model="orderProp">
    <option ng-repeat="orderby in orderProperties" value="{{orderby.criteria}}">{{orderby.property}}</option>
  </select>

其中：

orderProp 模型是：

function PhoneListCtrl($scope){

    $(document).ready($scope.orderProp = "age");

        $scope.orderProperties = [
            {"property":"Alphabetical","criteria":"name"},
            {"property":"Newest","criteria":"age"}
        ];
}

在dom中我可以看到value="name"和value="age"。但这次默认值未设置为“最新”。我不明白为什么硬编码的value="age"正在工作，而value="{{orderby.criteria}}"则不然。任何人都可以指导我完成。

Answer 1

您以错误的方式使用select：

<select ng-model="orderProp" 
    ng-options="orderby.criteria as orderby.property for orderby in orderProperties">
</select>

http://docs.angularjs.org/api/ng.directive:select

Answer 2

您应该使用ng-option填充选择。

angularjs将绑定变量分配给html标记属性

2 个答案: