小编Dav*_*nes的帖子

Angular:将对象绑定到<select>

首先,我应该说我现在只攻击了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">
Run Code Online (Sandbox Code Playgroud)

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 () …
Run Code Online (Sandbox Code Playgroud)

javascript 2-way-object-databinding angularjs

4
推荐指数
1
解决办法
7650
查看次数