angularjs將綁定變量分配給html標記屬性

Question

我正在瀏覽官方angularjs網站上給出的Angularjs tuts和docs。

在這里，我們添加一個用於訂購的選擇框，就像這樣

  <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填充選擇。