<强>下拉列表的简单使用
ng-option指令使用很简单,只需要绑定两个属性:
一个是ng-model用于获取选定的值;
另一个是ng-options用于确定下拉列表的元素数组。
& lt;选择ng-model="工程师。currentActivity”class="表单控件行为活动的行为“ng-options=祝辞& lt;/select>
上面这条语句就是把选择的值与engineer.currentActivity进行双向数据绑定,然后列表中的选项中是活动的每一个值。数据如下:
美元的范围。工程师={
名称:“丹尼”,
currentActivity:“修复bug”
}；
美元的范围。活动=(
“写代码”,
“测试代码”,
“解决问题”,
“跳舞”
);
运行结果如:
为了美观一点,这里引用了引导。
& lt; html ng-app=癿yApp”比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt;脚本src=" http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js "祝辞& lt;/script>
& lt;链接rel="样式表" href=" http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css " rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”比;
& lt;脚本src=" http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js "祝辞& lt;/script>
& lt;脚本src=" http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div ng-controller=癊ngineeringController”class=叭萜鳌北?
& lt; div类=癱ol-md-12”比;
目前{{engineer.name}}: {{engineer.currentActivity}}
& lt;/div>
& lt; div类=癱ol-md-4”比;
& lt;标签=皀ame”的在选择一个新的活动:& lt;/label>
& lt;选择ng-model="工程师。currentActivity表单控件“类=ng-options=盎疃ò?法案”比;
& lt;/select>
& lt;/div>
& lt;/div>
& lt;脚本type=" text/javascript祝辞
var myAppModule=angular.module (“myApp”, []);
myAppModule.controller (“EngineeringController”、“$”范围,函数(范围){
美元的范围。工程师={
名称:“丹尼”,
currentActivity:“修复bug”
}；
美元的范围。活动=(
“写代码”,
“测试代码”,
“解决问题”,
“跳舞”
];
}]）;
& lt;/script>
& lt;/body>
& lt;/html>
<强>复杂对象,自定义列表名称
有的时候下拉列表并不是单纯的字符串数组,可能是json对象,例如:
美元的范围。活动=(
{id: 1,类型:“工作”,名字:“写代码”},
{id: 2,类型:“工作”,名称:测试代码"},
{id: 3,类型:“工作”,名字:“修复bug”},
{id: 4,类型:“玩”,名字:“跳舞”}
);
这个时候,绑定的数据就必须是与这里面的格式相同的数据,比如直接复制其中一条:
美元的范围。工程师={
名称:“丹尼”,
currentActivity: {
id: 3,
类型:“工作”,
名称:“修复bug”
}
};
当然也可以直接指定成:
美元的范围。工程师={currentActivity:活动[3]}
<>强然后在指令中可以循环列表拼接处下拉框的名称
& lt;选择
ng-model=" engineer.currentActivity "
类="表单控件"
ng-options=癮.name + ' (' +。类型+‘)’活动”的在
& lt;/选择比;之前
运行效果如:
全部的代码如下:
& lt; html ng-app=癿yApp”比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt;脚本src=" http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js "祝辞& lt;/script>
& lt;链接rel="样式表" href=" http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css " rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”比;
& lt;脚本src=" http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js "祝辞& lt;/script>
& lt;脚本src=" http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div ng-controller=癊ngineeringController”class=叭萜鳌北?
& lt; div类=癱ol-md-12”比;
目前{{engineer.name}}: {{engineer.currentActivity}}
& lt;/div>
& lt; div类=癱ol-md-4”比;
& lt;标签=皀ame”的在选择一个新的活动:& lt;/label>
& lt;选择
ng-model=" engineer.currentActivity "
类="表单控件"
ng-options=癮.name + ' (' +。类型+‘)’活动”的在
& lt;/选择比;
& lt;/div>
& lt;/div>
& lt;脚本type=" text/javascript祝辞
var myAppModule=angular.module (“myApp”, []);
myAppModule.controller (“EngineeringController”、“$”范围,函数(范围){
美元的范围。工程师={
名称:“丹尼”,
currentActivity: {
id: 3,
类型:“工作”,
名称:“修复bug”
}
}；
美元的范围。活动=(
{id: 1,类型:“工作”,名字:“写代码”},
{id: 2,类型:“工作”,名称:测试代码"},
{id: 3,类型:“工作”,名字:“修复bug”},
{id: 4,类型:“玩”,名字:“跳舞”}
];
}]）;
& lt;/script>
& lt;/body>
& lt;/html>
