发表新帖
发表新帖

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

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

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

I have this code.
提交评论
  •  加载中...
  • 傲寒
    2020-11-22 06:21

    In my case, I was need to insert a initial value only to tell to user to select an option, so, I do like the code below:

    <select ...
    <option value="" ng-selected="selected">Select one option</option>
</select>

    When I tryed an option with the value != of an empty string (null) the option was substituted by angular, but, when put an option like that (with null value), the select apear with this option.

    Sorry by my bad english and I hope that I help in something with this.

    0 讨论(0)
  • 暖寄归人
    2020-11-22 06:21

    If you have some thing instead of just init the date part, you can use ng-init() by declare it in your controller, and use it in the top of your HTML. This function will work like a constructor for your controller, and you can initiate your variables there.

    angular.module('myApp', [])
 .controller('myController', ['$scope', ($scope) => {
   $scope.allOptions = [
     { name: 'Apple', value: 'apple' }, 
     { name: 'Banana', value: 'banana' }
   ];
   $scope.myInit = () => {
      $scope.userSelected = 'apple'
      // Other initiations can goes here..
   }
}]);


<body ng-app="myApp">
  <div ng-controller="myController" ng-init="init()">
    <select ng-model="userSelected" ng-options="option.value as option.name for option in allOptions"></select>
   </div>
</body>
    0 讨论(0)
  • 野趣味
    2020-11-22 06:26

    My solution to this was use html to hardcode my default option. Like so:

    In HAML:

    %select{'ng-model' => 'province', 'ng-options' => "province as province for province in summary.provinces", 'chosen' => "chosen-select", 'data-placeholder' => "BC & ON"}
  %option{:value => "", :selected => "selected"}
    BC &amp; ON

    In HTML:

    <select ng-model="province" ng-options="province as province for province in summary.provinces" chosen="chosen-select" data-placeholder="BC & ON">
  <option value="" selected="selected">BC &amp; ON</option>
</select>

    I want my default option to return all values from my api, that's why I have a blank value. Also excuse my haml. I know this isn't directly an answer to the OP's question, but people find this on Google. Hope this helps someone else.

    0 讨论(0)
  • 谎友^
    2020-11-22 06:26 
        <!--
    Using following solution you can set initial 
default value at controller as well as after change option selected value shown as default.
    -->
    <script type="text/javascript">
      function myCtrl($scope)
        {
          //...
            $scope.myModel=Initial Default Value; //set default value as required
          //..
        }
    </script>
    <select ng-model="myModel" 
                ng-init="myModel= myModel"
                ng-options="option.value as option.name for option in options">
        </select>
    0 讨论(0)
  • 天命终不由人
    2020-11-22 06:27

    Depending on how many options you have, you could put your values in an array and auto-populate your options like this

    <select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]">
   <option value="">Pick a Number</option>
</select>
    0 讨论(0)
    • 上一页 1 2 3 4 下一页
     看不清?
    提交回复
    热议问题