Question

我有一个表单，我使用select选项动态填充值以显示下拉列表。但我的代码无效。

mainApp is module,
mainCntlr is ciontroller

Html code:
`<pre>
<form class="form-group">
   <label> First Band Color: </label>
        <select class="form-control" name="" id="" ng-model="selectedColor" ng-options="color.name for color in colorCodes">
      </select>
   <label> Second Band Color: </label>
        <select class="form-control " name="" id="" ng-model="selectedColor" ng-options="color.name for color in colorCodes">
        </select>
   <label> Third Band Color: </label>
        <select class="form-control" name="" id="" ng-model="selectedColor" ng-options="color.id as color.name for color in colorCodes">
        </select>
   <label> Fourth Band Color: </label>
        <select class="form-control" name="" id="" ng-model="selectedColor" ng-options="color.name for color in colorCodes">
        </select>
</form>
</pre>`

script:

    `<script>
        var app = angular.module('mainApp',[]);
        app.controller('mainCntlr',function($scope){
            $scope.colorCodes =[
                    {"name": "Black", "id": 1},
                    {"name": "Brown", "id": 2},
                    {"name": "Red", "id": 3}
                    ];
        }); 
    </script>`


  [1]: http://i.stack.imgur.com/lKUNF.png

让我知道我犯错的地方

Answer 1

使用此html代码并在*.js文件中添加模型;名为selected

<select ng-controller='mainCntlr' ng-model='selected' 
        ng-options="color as color.name for color in colorCodes">
</select>

Answer 2

**

试用此代码

**

<script>
  var app1 = angular.module('mainApp',[]);
    app1.controller('mainCntlr',function($scope){
        $scope.colorCodes =[
                {"name": "Black", "id": 1},
                {"name": "Brown", "id": 2},
                {"name": "Red", "id": 3}
                ];
    }); 

</script>
<div  ng-app="mainApp" ng-cloak ng-controller="mainCntlr" class="w3-card-2 w3-margin" style="max-width:400px;">
  <select>
  <option ng-repeat="key in colorCodes" class="w3-padding-16" value="{{key.id}}">{{key.name}}</option>
</select>     
</div>

Answer 3

试试这个

var app = angular.module('myApp',[]);

app.controller('DemoController', function($scope){
  $scope.colorCodes =[
                {"name": "Black", "id": 1},
                {"name": "Brown", "id": 2},
                {"name": "Red", "id": 3}
                ];
  $scope.changeColor = function(n){
    alert(JSON.stringify(n))
    }
    });

<html>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </head>
  <body ng-app="myApp">
      <div ng-controller="DemoController">
        <select ng-model="selected" ng-change="changeColor(selected)" required 
                ng-options="n.id as n.name for n in colorCodes">
		</select>
       </div>
    </body>
</html>

ng-option选择选项的问题

3 个答案: