带有 ng 重复的角度选择选项

Angular select options with ng-repeat

本文关键字：选择 选项 ng 带有      更新时间：2023-09-26

我已经为ngOptions，ngRepeat而苦苦挣扎了几天。我必须做一些事情，比如选择人员控制选项。我的 REST 服务在下面的代码片段中给了我类似数组的东西。我尝试了 Angular 文档中的每个堆栈溢出答案和示例。没有结果。我什至不能显示一个属性 - 我做错了吗？

下面有一些尝试。

感谢您的任何建议和帮助。

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>

您忘记在应用程序中注册控制器：angular.module('myApp').controller('MyCtrl', MyCtrl);

然后在 html 中的模板中设置<html ng-app="myApp"></html> .

然后在模板中指定控制器，该

控制器控制所需的模板，例如<form ng-controller='MyCtrl'> 

<!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>

您需要为myApp模块注册控制器

喜欢：

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"}];
}

在 HTML 中，您应该使用ng-app="myApp"和ng-controller="myCtrl"

喜欢：

<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>

普伦克演示链接

亲爱的，试试这个：

应用程序.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];
}

网页代码

<select ng-options="player as player.nickName for player in players ng-model="selected"></select>
  1. 工作小提琴 这是你的代码：在 AngularJs 小提琴中选择

谢谢和干杯

相关文章：