发表新帖
发表新帖

How to have a default option in Angular.js select box

后端 未结
关注
23 1540
悲哀的现实
悲哀的现实 2020-11-22 06:04

I have searched Google and can\'t find anything on this.

I have this code.
提交评论
  •  加载中...
  • 独厮守ぢ
    2020-11-22 06:14

    Simply use ng-selected="true" as follows:

    <select ng-model="myModel">
        <option value="a" ng-selected="true">A</option>
        <option value="b">B</option>
</select>
    0 讨论(0)
  • 陌清茗
    2020-11-22 06:14

    try this in your angular controller...

    $somethingHere = {name: 'Something Cool'};

    You can set a value, but you are using a complex type and the angular will search key/value to set in your view.

    And, if does not work, try this : ng-options="option.value as option.name for option in options track by option.name"

    0 讨论(0)
  • 陌清茗
    2020-11-22 06:16

    I think, after the inclusion of 'track by', you can use it in ng-options to get what you wanted, like the following

     <select ng-model="somethingHere" ng-options="option.name for option in options track by option.value" ></select>

    This way of doing it is better because when you want to replace the list of strings with list of objects you will just change this to 

     <select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>

    where somethingHere is an object with the properties name and id, of course. Please note, 'as' is not used in this way of expressing the ng-options, because it will only set the value and you will not be able to change it when you are using track by

    0 讨论(0)
  • 终归单人心
    2020-11-22 06:17

    I needed the default “Please Select” to be unselectable. I also needed to be able to conditionally set a default selected option.

    I achieved this the following simplistic way: JS code: // Flip these 2 to test selected default or no default with default “Please Select” text //$scope.defaultOption = 0; $scope.defaultOption = { key: '3', value: 'Option 3' };

    $scope.options = [
   { key: '1', value: 'Option 1' },
   { key: '2', value: 'Option 2' },
   { key: '3', value: 'Option 3' },
   { key: '4', value: 'Option 4' }
];

getOptions();

function getOptions(){
    if ($scope.defaultOption != 0)
    { $scope.options.selectedOption = $scope.defaultOption; }
}

    HTML:

    <select name="OptionSelect" id="OptionSelect" ng-model="options.selectedOption" ng-options="item.value for item in options track by item.key">
<option value="" disabled selected style="display: none;"> -- Please Select -- </option>
</select>
<h1>You selected: {{options.selectedOption.key}}</h1>

    I hope this helps someone else that has similar requirements.

    The "Please Select" was accomplished through Joffrey Outtier's answer here.

    0 讨论(0)
  • 自闭症患者
    2020-11-22 06:18

    Try this:

    HTML

    <select 
    ng-model="selectedOption" 
    ng-options="option.name for option in options">
</select>

    Javascript

    function Ctrl($scope) {
    $scope.options = [
        {
          name: 'Something Cool',
          value: 'something-cool-value'
        }, 
        {
          name: 'Something Else',
          value: 'something-else-value'
        }
    ];

    $scope.selectedOption = $scope.options[0];
}

    Plunker here.

    If you really want to set the value that will be bound to the model, then change the ng-options attribute to

    ng-options="option.value as option.name for option in options"

    and the Javascript to

    ...
$scope.selectedOption = $scope.options[0].value;

    Another Plunker here considering the above.

    0 讨论(0)
    • 上一页 1 2 3 4 下一页
     看不清?
    提交回复
    热议问题