发表新帖
发表新帖

How to set default value in ng-options

后端 未结
关注
4 499
北荒
北荒 2020-12-10 12:39

I can set a dropdown list with default value in angularjs as,
提交评论
  •  加载中...
  • 悲哀的现实
    2020-12-10 13:21

    i have acheieved what you need using your code and ng-options like you mentioned, here is Working Fiddle

    Full CODE

    <div ng-app="ngrepeatSelect">
    <div ng-controller="ExampleController">
        <form name="myForm">
            <label for="repeatSelect">Angular select:</label>
            <select name="repeatSelect" 
   id="repeatSelect" 
   ng-model="repeatSelect"
   ng-init=" repeatSelect = data[0]"  
   ng-options="option.name for option in data track by option.id">
</select>
        </form>
        <br/> <tt>Selected value: {{repeatSelect.id}}</tt>

    </div>
</div>
<br/>
    0 讨论(0)
  • [愿得一人]
    2020-12-10 13:31

    I will suggest an example HTML part

    <select class="form-control" ng-model="data.selectedOption" required ng-options="option.name as option.name for option in venueNamelists"  ng-change="getmediationRooms(data.selectedOption)"></select>

    In my controller

    $scope.data = {selectedOption: $scope.venueNamelists[i].name};

    the model value should equal to the key,value pair in the venueNamelists.

    0 讨论(0)
  • 谎友^
    2020-12-10 13:37

    All this miss use of ng-init.

    From the angular docs:

    This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit, such as for aliasing special properties of ngRepeat, as seen in the demo below; and for injecting data via server side scripting. Besides these few cases, you should use controllers rather than ngInit to initialize values on a scope.

    Source docs

    In my opinion the correct way to set a default value is to simply pre-fill your ng-model property with the value selected from your ng-options, angular does the rest.

    Essentially when you define the $scope property your select will bind to assign it the default value from your data array. If your data array is from an ajax request, just assign it once you have the data.

    .controller('test', ['$scope', function ($scope) {
    $scope.data = [{name: 'one', id: 1}, {name: 'two', id: 2},{name: 'three', id: 3}];
    $scope.repeatSelect= $scope.data[0];
}]);

    There is one caveat to note. If you employ the as key word in your expression you have to assign your ng-model with the actual property your telling it to select.

    See full fiddle demoing both: http://jsfiddle.net/kb99gee8/

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