ng-option Проблемы с опцией выбора

У меня есть форма, где я использую опцию select для динамического заполнения значений для отображения выпадающего списка. Но мой код не работает.ng-option Проблемы с опцией выбора

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

Позвольте мне знать, где я сделал ошибку

источник

2016-04-01 Barty

Где находится твой HTML? –

Попробуйте один

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"> 
 
\t \t </select> 
 
     </div> 
 
    </body> 
 
</html>

источник

2016-04-01 11:01:17

использовать этот html код и добавить модель в файле *.js; названный selected

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

источник

2016-04-01 10:29:04 manish

Не работает ... Я пробовал. – Barty

Попробуйте этот код

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

источник

2016-04-01 10:30:31

{{key.name}} отображается в опции ...: (( – Barty

ng-option Проблемы с опцией выбора

ответ

Смежные вопросы