Angular：綁定對象到<select>

Question

首先，我應該說我現在只攻擊了2天的Angular.js，所以我可能會接近這個錯誤。

我的例子「人」對象（或模型，如果我明白）有兩個屬性，名字和標題。我有兩個字段<select>標題和<input type="text" />名稱。名字的綁定工作正常，我很高興，但標題混淆了我。

我綁定一個對象數組與Code和Desc填充罰款。但是當我想要（提交時）或設置（加載時）它不起作用，因爲綁定使用整個標題對象。

http://jsfiddle.net/qm7E7/11/

（點擊下一步以顯示序列化的對象。）

HTML

<div ng-app ng-controller="PersonCtrl"> 
    <form name="myForm" ng-submit="submit()"> 
     Title: <select ng-model="Person.Title" ng-options="t.Desc for t in TitleList"> 
     <option style="display: none" value="">Please select</option> 
    </select> 
     <br/> 
    Firstname: <input type="text" ng-model="Person.Firstname" />  
     <br/> 
     <input type="submit" value="Next" /> 
     <br/> 
     <div id="obj"></div> 
    </form> 
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> 

JS

// Person controller 
function PersonCtrl($scope) { 
    $scope.TitleList = [{Code: 'MR', Desc: 'Mr'}, 
         {Code: 'MRS', Desc: 'Mrs'}] 

    $scope.Person = { 
     Firstname: 'dave', 
     Title: 'MR' 
    }; 

    $scope.submit = function() { 
     $("#obj").text(JSON.stringify($scope.Person)); 
    }; 
} 

我是誤解了整個概念還是什麼。我也應該說我不想使用整個MVC路由概念。只是對象和「2路綁定」。

Answer 1

選擇輸入是一個非常特殊的角小狗。

這裏有一個更新的小提琴：

http://jsfiddle.net/qm7E7/16/

你可以提供的數據爲對象，其中的鍵是代碼和值是描述：

$scope.TitleList = { 
    'MR' : 'Mr', 
    'MRS' : 'Mrs' 
}; 

而在你的html：

<select ng-model="Person.Title" ng-options="code as desc for (code, desc) in TitleList"> 

語法是有點t瑞奇。您可以在角度文檔中閱讀更多關於它的信息，特別是評論。 http://docs.angularjs.org/api/ng.directive:select

Answer 2

您需要指定值

<select ng-model="Person.Title" ng-options="t.Code as t.Desc for t in TitleList"> 

http://jsfiddle.net/qm7E7/19/