选择框选项的简单 ng-Repeat答案

【问题标题】：Simple ng-Repeat for options of Select boxes选择框选项的简单 ng-Repeat
【发布时间】：2015-10-27 22:36:25
【问题描述】：

我正在使用ng-repeat 从数组中简单地放下选项。不过，我希望我做得很好，我在选择选项的下拉列表中看不到任何选项。有人可以帮我找出错误吗？

var myApp = angular.module("myApp", []);

myApp.controller('myCtrl', function($scope) {
    		 
    $scope.Country = [
        "India","Pakistan","Germany"
    
    ];
});

<html>
    <head>
    	<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
    	<select>
    		<option ng-repeat="x in Country"></option>
    	</select>
    </body>
</html>

【问题讨论】：

<option ng-repeat="x in Country">{{x}}</option> 你没有打印价值，就是这样！
@Eric - 你如何从代码中制作这些 sn-ps？我也想这样做

标签： javascript arrays angularjs angularjs-ng-repeat

【解决方案1】：

试试这个:::

<html>
<head>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <select ng-model ="selectedCountry">
        <option ng-repeat="x in Country" value = "{{x}}"> {{x}} </option>
    </select>

    <script>
         var myApp = angular.module("myApp", []);

         myApp.controller('myCtrl', function($scope) {

            $scope.Country = [
              "India","Pakistan","Germany"

            ];
         });
    </script>
</body>
</html>

【讨论】：

它将创建 3 个选择输入......不是 3 个选项！
是的，罗伊，它与 Rayon 所说的编辑一起工作...... ;) 你快到了......

【解决方案2】：

您实际上没有将任何值打印到选项元素中，您应该尝试如下。

<html>
<head>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <select>
        <option ng-repeat="x in Country" value="{{x.id}}">{{x.name}}</option>
    </select>

    <script>
         var myApp = angular.module("myApp", []);

         myApp.controller('myCtrl', function($scope) {

            $scope.Country = [
             {"id":"1","name":"India"},
             {"id":"2","name":"Pakistan"},
             {"id":"3","name":"Germany"}
            ];
         });
    </script>
</body>
</html>

【讨论】：

【解决方案3】：

使用ng-options 而不是使用ng-repeat 和选择标签：

<select ng-options="x for x in country" ng-model="selectedCountry"> </select>

【讨论】：

哦，是的，知道了！ ...谢谢 ;)
请看我的帖子。我的解决方案已经过测试和验证

【解决方案4】：

是的，您没有使用 {{x}} 这个值，这就是它对您不起作用的原因，它可能是 ng-options 或 option 任何您可以使用的东西...

【讨论】：

【解决方案5】：

使用ng-options 而不是使用ng-repeat 和选择标签：

我的解决方案已经过测试和验证：

<html>
<head>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <select ng-options="option.name for option in Country track by option.id" ng-model="selectedCountry">
        <option value="">All</option>
    </select>

    ID: {{selectedCountry.id}} and NAME: {{selectedCountry.name}}

    <script>
         var myApp = angular.module("myApp", []);

         myApp.controller('myCtrl', function($scope) {

         $scope.selectedCountry="";

         $scope.Country = [
             {"id":"1","name":"India"},
             {"id":"2","name":"Pakistan"},
             {"id":"3","name":"Germany"}
            ];
         });
    </script>
</body>
</html>

DEMO in Plunker

【讨论】：