在angular中实现下拉框的两种方式ng-repeat和ng-option

更新时间:2023-07-31 19:53:31 阅读: 评论:0

在angular中实现下拉框的两种⽅式ng-repeat和ng-option 1. ng-repeat实现下拉框:
重庆导游词lect下拉框⾥option组装成下拉框,这⾥利⽤ng-repeat指令来创建
茹毛
实现源码
<!DOCTYPE html>
<html>
<head>
<meta chart="UTF-8">
<title>AngularJS之下拉框(⽅式⼆)</title>
<script type="text/javascript"src="../js/angular.min.js"></script>
<script>
var app = dule("condApp",[]);
海边英语$s = ["松树","樟树","枫树","枣树","桃树"];
});
</script>
</head>
<body>
<div ng-app="condApp"ng-controller="condCon">
<lect >
<option ng-repeat="tree in trees">{{tree}}</option>
</lect>
</div>
喂狗粮</body>
惊天动地的近义词</html>
<-option指令使⽤很简单,只需要绑定两个属性:
⼀个是ng-model⽤于获取选定的值;
含鸡的成语另⼀个是ng-options⽤于确定下拉列表的元素数组。
<lect ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></lect>
上⾯这条语句就是把选择的值与engineer.currentActivity进⾏双向数据绑定,然后列表中的选项是activities中的每⼀个值。数据如下:$ineer = {
name: "Dani",
currentActivity: "Fixing bugs"
};
百合饭包
$scope.activities =
[
"Writing code",
"Testing code",
"Fixing bugs",replying
"Dancing"
];

本文发布于:2023-07-31 19:53:31,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/89/1103447.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:列表   下拉框   绑定
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图