发表新帖
发表新帖

ng-selected not working in select element

前端 未结
关注
4 1000
太阳男子
太阳男子 2020-11-28 15:18

I have a bound select
提交评论
  •  加载中...
  • 孤独总比滥情好
    2020-11-28 15:54

    Some people have problems with this. I found a great solution for a simple drop down if controller as someController

    var vm = this;
this.colors = [
        {name:'Red'}, 
        {name:'Orange'}, 
        {name:'Yellow'}, 
        {name:'Green'}, 
        {name:'Blue'}, 
        {name:'Indigo'}, 
        {name:'Violet'}
 ];
this.color_selected = "Yellow";
<select ng-model="someController.color_selected" ng-options="opt.name as opt.name for opt in someController.colors">
</select>

    `

    0 讨论(0)
  • 鱼传尺愫
    2020-11-28 15:58

    ng-selected should be used in the <option> tag, not in the <select> tag. Take a closer look at its doc and the example.

    Because the select directive's determination of the selected option is based on ngModel. Therefore, once you remove ng-selected="c.CollegeName == collegeSelection.CollegeName", your code should work.

    I created a very simple plunk to demonstrate the "selected" feature in select directive.

    More details:

    AngularJS uses ngModel directive to enable "two-way data binding" between your model and UI elements.

    In the case of "select", the model collegeSelection you specified as <select ng-model="collegeSelection" ...> is the selected item. Which means if an user selects an item from the dropdown on the page, collegeSelection will be set to that item; and, if you set collegeSelection to an item in your javascript code, AngularJS will make sure that the corresponded <option> is selected.

    Say you have the following code in your controller:

    $scope.colleges = [
    {id: 0, name: 'a'},
    {id: 1, name: 'b'},
    {id: 2, name: 'c'}
];

$scope.collegeSelection = $scope.colleges[0];

    And the HTML looks like:

    <select ng-model="collegeSelection" ng-options="c as c.name for c in colleges"></select>

    That's it! The first college in the colleges array will be selected if you run the code.

    Just remember collegeSelection is the selected option, no matter it's because user selected an item on the UI, or you selected an item in javascript.

    That's how two-way data binding works.

    0 讨论(0)
  • 你的背包
    2020-11-28 15:58

    After playing around with ng-selected for a while I was not able to get it to work like you're asking. However, I was able to pre-select a specific option using ng-init.

    Here's a JSFiddle of my solution. My <select> ended up being:

     <select ng-model="selectedColor" ng-options="color.value as color.name for color in colors" ng-init="selectedColor='yellow'">
   <option value="">Select A Color</option>
 </select>`

    And my colors array is:

     colors = [
        {name:'Red', value: 'red'}, 
        {name:'Orange', value: 'orange'}, 
        {name:'Yellow', value: 'yellow'}, 
        {name:'Green', value: 'green'}, 
        {name:'Blue', value: 'blue'}, 
        {name:'Indigo', value: 'indigo'}, 
        {name:'Violet', value: 'violet'}
 ]

    Changing the ng-init="selectedColor='yellow'" to another value will select a different option.

    0 讨论(0)
    •  看不清?
    提交回复
    热议问题