Question

首先，我应该说我现在只攻击了Angular.js 2天，所以我可能会接近这一切。

我的示例“Person”对象（或模型，如果我理解）有两个属性，Firstname和Title。我有两个字段<select>用于标题，<input type="text" />用于名称。 Firstname绑定工作正常，我很高兴，但标题令我困惑。

我正在使用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路由概念。只是对象和“双向绑定”。

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">

语法有点棘手。您可以在角度文档中阅读有关它的更多信息，尤其是注释。 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/

Angular：将对象绑定到<select> </select>

2 个答案: