ng-repeat的角度选择选项
[英]Angular select options with ng-repeat
问题描述
I'm struggled for few days now with ngOptions, ngRepeat. 
我现在在ngOptions，ngRepeat上挣扎了几天。 I have to do something like select option of people control. 我必须做一些类似的人员控制选项。 My REST service is giving me something like array in snippet below. 我的REST服务在下面的代码段中为我提供了类似数组的功能。 I tried every stackoverflow answer and example from Angular documentation. 我尝试了Angular文档中的每个stackoverflow答案和示例。 No results. 没结果。 I can't even show a single attribute - wham am i doing wrong? 我什至无法显示单个属性-我做错了什么？
There is some tries below. 下面有一些尝试。
Thanks for any advice and help. 感谢您的任何建议和帮助。
var myApp = angular.module('myApp',[]); //myApp.directive('myDirective', function() {}); //myApp.factory('myService', function() {}); function MyCtrl($scope) { $scope.name = 'Superhero'; $scope.players = [{"id": "1", "nickName" : "Cole", "firstName" : "Mark", "lastName" : "Coleman"}, {"id" : "2", "nickName" : "West", "firstName" : "Peter", "lastName" : "West"}]; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <form> <label>Captain: <select ng-model="team.captain"> <option ng-repeat="player in players" value="{{player.id}}"> {{player.firstName}} {{player.lastName}}</option> </select> </label><br /> </form>
4 个解决方案
解决方案1
1 2016-03-12 18:31:06
You forgot to register you controller in your app: angular.module('myApp').controller('MyCtrl', MyCtrl); 您忘记在应用程序中注册控制器： angular.module('myApp').controller('MyCtrl', MyCtrl);
Then in the template in html set <html ng-app="myApp"></html> . 然后在html模板中设置<html ng-app="myApp"></html> 。
And then in template specify controller which controlls desired piece of template like <form ng-controller='MyCtrl'> 然后在模板中指定用于控制所需模板的控制器，例如<form ng-controller='MyCtrl'>
解决方案2
0 2016-03-12 18:33:02
<!DOCTYPE html>
<htm ng-app="myApp">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-controller="MyCtrl">
.. <select ng-model="team.captain">
<option ng-repeat="player in players" value="{{player.id}}"> {{player.firstName}} {{player.lastName}}</option>
</select>
</form>
<script>
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.players = [{"id": "1", "nickName" : "Cole", "firstName" : "Mark", "lastName" : "Coleman"}, {"id" : "2", "nickName" : "West", "firstName" : "Peter", "lastName" : "West"}];
}
myApp.controller('MyCtrl',MyCtrl);
</script>
</body>
</html>
解决方案3
0 2016-03-12 18:36:12
you need to register controller for myApp module 您需要为myApp模块注册控制器
like: 喜欢：
var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl', MyCtrl);
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.players = [{"id": "1", "nickName" : "Cole", "firstName" : "Mark", "lastName" : "Coleman"}, {"id" : "2", "nickName" : "West", "firstName" : "Peter", "lastName" : "West"}];
}
and in html you should use ng-app="myApp" and ng-controller="myCtrl" 在html中，您应该使用ng-app="myApp"和ng-controller="myCtrl"
like: 喜欢：
<html ng-app="myApp"> //used module
<head>
// load your script here
</head>
<body ng-controller="myCtrl"> // used controller
<form>
<label>Captain:
<select ng-model="team.captain">
<option value ="">select one</option>
<option ng-repeat="player in players" value="{{player.id}}"> {{player.firstName}} {{player.lastName}}</option>
</select>
</label><br />
</form>
</body>
</html>
解决方案4
0 2016-03-12 18:37:34
Dear , Try This one : 亲爱的 ，试试这个：
APP.JS CODE APP.JS代码
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.players = [{"id": "1", "nickName" : "Cole", "firstName" : "Mark", "lastName" : "Coleman"}, {"id" : "2", "nickName" : "West", "firstName" : "Peter", "lastName" : "West"}];
$scope.selected = $scope.players[0];
}
HTML CODE HTML代码
<select ng-options="player as player.nickName for player in players ng-model="selected"></select>
- Working Fiddle Here of your code : Select in AngularJs Fiddle 在这里工作代码： 在AngularJs Fiddle中选择
Thanks & Cheers 谢谢与欢呼
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.