ng-repeat vs ng-options which is best for me

后端 未结 3 1349
闹比i
闹比i 2021-01-14 12:42

i have to display the JSON data in drop down list ,for that i have two options one of the options is By using ng-repeat and other one is ng-options.

ng-repeat code :

相关标签:
3条回答
  • 2021-01-14 13:02

    As far as performance is regarded, I think you should use your own directive that will handle it.

    ng-options puts every element in $watch => gets really slow if the list contains hundreds elements

    ng-repeat will be slow to be rendered.

    You should then prefer using your own directive, and build your html into it

    0 讨论(0)
  • 2021-01-14 13:06

    I think that ng-options, because that is meant to be used in cases like this.

    Angularjs Docs:-

    ngOptions provides an iterator facility for the element which should be used instead of ngRepeat when you want the select model to be bound to a non-string value. This is because an option element can only be bound to string values at present.

    0 讨论(0)
  • 2021-01-14 13:14

    The code below (also in Plunker) shows no difference even when the model is bound to a non-string value (an arithmetic code) except for the initialization where the approach with ng-repeat fails to display the default value (or maybe there's a workaround for that as well). After a value is chosen the behavior is the same:

    <html>
      <head>
        <title>making choices </title>
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js'></script>
      </head>
      <body ng-app='theApp' ng-controller='TheController as ctl'>
        <div ng-controller='TheController as ctl'>
          Select your favorite fruit:
          <select ng-model='ctl.selectedFruitCode'>
            <option ng-repeat='fruit in ctl.fruits' ng-value='fruit.code'>{{fruit.label}}</option>
          </select>
          <br/>
          Selected fruit is: <tt>{{ctl.getSelectedFruit().label}}</tt> (from code: {{ctl.selectedFruitCode}})
        </div>
        <hr>
        <div ng-controller='TheController as ctl'>
          Select your favorite fruit:
          <select ng-model='ctl.selectedFruitCode'
                  ng-options='c.code as c.label for c in ctl.fruits'>
          </select>
          <br/>
          Selected fruit is: <tt>{{ctl.getSelectedFruit().label}}</tt> (from code: {{ctl.selectedFruitCode}})
        </div>
        <script type='text/javascript'>
         angular.module('theApp', [])
                .controller('TheController', [function() {
                  var self = this;
                  self.fruits = {};
                  self.fruits = [{label: 'Apples'   , code:0},
                                 {label: 'Bananas'  , code:1},
                                 {label: 'Peach'    , code:2},
                                 {label: 'Apricot'  , code:3}];
                  self.selectedFruitCode = self.fruits[0].code;
                  self.getSelectedFruit = function() {
                    for (var i = 0 ; i < self.fruits.length ; i++) {
                      if (self.fruits[i].code==self.selectedFruitCode)
                        return self.fruits[i];
                    }
                  };
                }]);
        </script>
      </body>
    </html>
    
    0 讨论(0)
提交回复
热议问题