Home > Web Front-end > JS Tutorial > AngularJS uses the ng-repeat directive to implement drop-down boxes

AngularJS uses the ng-repeat directive to implement drop-down boxes

高洛峰
Release: 2016-12-29 10:35:54
Original
1104 people have browsed it

AngularJs’s ng-repeat allows us to traverse arrays to generate Dom elements very conveniently, but improper use can also cause performance problems. Let me share with you how to use the ng-repeat directive to implement a drop-down box in the project.

1. Problem background

The options in the select drop-down box are assembled into a drop-down box. Here, the ng-repeat instruction is used to create

2. Implementation source code

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>AngularJS之下拉框(方式二)</title> 
<script type="text/javascript" src="../js/angular.min.js" ></script> 
<script> 
var app = angular.module("secondApp",[]); 
app.controller("secondCon",function($scope){ 
$scope.trees = ["松树","樟树","枫树","枣树","桃树"]; 
}); 
</script> 
</head> 
<body> 
<div ng-app="secondApp" ng-controller="secondCon"> 
<select style="width: 200px;"> 
<option ng-repeat="tree in trees">{{tree}}</option> 
</select> 
</div> 
</body> 
</html>
Copy after login

3. Problem description

ng-repeat instruction can repeat data

AngularJS uses the ng-repeat directive to implement drop-down boxes

The above is the editor’s introduction to AngularJS using ng- The repeat command implements a drop-down box. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!


For more related articles about AngularJS using the ng-repeat directive to implement drop-down boxes, please pay attention to the PHP Chinese website!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template