角:对象绑定到&lt;&选择GT; [英] Angular: Binding objects to <select>
问题描述
首先,我应该说,我只攻击Angular.js 2天,所以我现在可能接近这整个事情是错误的。
Firstly, I should say that I have only attacked Angular.js for 2 days now so I may be approaching this whole thing wrong.
我的例子人的对象(或者,如果我理解模型)有两个属性,名字和职务。我有两个字段&LT;选择&GT;
的标题和&LT;输入类型=文本/&GT;
的名称。将名字绑定工作正常,我很高兴,但标题是混淆了我。
My example "Person" object (or model if I understand) has two properties, Firstname and Title. I have two fields <select>
for title and <input type="text" />
for name. The Firstname binding works fine and I am happy, but the title is confusing me.
我绑定与code和说明其填充罚款的对象数组。但是,当我想(在提交)或设置(负载),这是行不通的,因为绑定使用整个标题对象。
I am binding an object array with Code and Desc which populates fine. But when I want to get (on submit) or set (on load) it does not work because the binding uses the entire title object.
(点击下一步,显示序列化对象。)
(Click on Next to display the serialized object.)
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路由的概念。就在对象和双向绑定。
Am I misunderstanding the whole concept or what. I should also say that I don't want to use the whole MVC routing concept. Just the objects and "2 way binding".
推荐答案
选择输入是在角一个非常特殊的小狗。
The select input is a very special puppy in angular.
下面是一个更新的提琴:
Here's an updated fiddle:
您可以提供的数据为对象,其中键是codeS和值的描述:
You could provide the data as an object, where the keys are the codes and the values are the description:
$scope.TitleList = {
'MR' : 'Mr',
'MRS' : 'Mrs'
};
而在你的HTML:
And in your html:
<select ng-model="Person.Title" ng-options="code as desc for (code, desc) in TitleList">
语法有点棘手。你可以阅读更多关于它的角文档,尤其是评论。 <一href=\"http://docs.angularjs.org/api/ng.directive:select\">http://docs.angularjs.org/api/ng.directive:select
这篇关于角:对象绑定到&lt;&选择GT;的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!