Question

我正在使用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>

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

Answer 2

您实际上没有在option元素中打印任何值，您应该尝试如下。

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

Answer 3

使用ng-options代替ng-repeat使用select标记：

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

Answer 4

是的，你没有使用{{x}}这个值，这就是它不适合你的原因，它可能是ng-options或任何你可以使用的选项......

Answer 5

使用ng-options代替ng-repeat使用select标记：

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

<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

简单ng-Repeat用于选择框的选项

5 个答案: