Ng-repeat Vs Ng-options Which Is Best For Me - Stack Overflow

Trang chủ » Ng Repeat Vs Ng Option Có Gì Khác Nhau » Ng-repeat Vs Ng-options Which Is Best For Me - Stack Overflow

Có thể bạn quan tâm

    1. Home
    2. Questions
    3. Tags
    4. Users
    5. Companies
    6. Labs
    7. Jobs
    8. Discussions
    9. Collectives

    10. Communities for your favorite technologies. Explore all Collectives

  2. Teams

    Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

    Try Teams for free Explore Teams
  3. Teams

  4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs ng-repeat vs ng-options which is best for me Ask Question Asked 10 years, 6 months ago Modified 9 years, 2 months ago Viewed 14k times 3

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 :

in html file :

<select> <option ng-repeat="prod in testAccounts" value="{{prod.id}}">{{prod.name}}</option> </select>

and in script file:

$http.get('document.json').success(function (data) { $scope.testAccounts = angular.fromJson(data); }

and other one ng-options :

in html file :

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

in script file:

$http.get('document.json').success(function (data) { $scope.testAccounts1 = data; $scope.selectedTestAccount = $scope.testAccounts1[0]; }

Now i want to know which one is best for my project to improve the performance .Any guidelines please .

  • javascript
  • json
  • angularjs
  • angularjs-ng-repeat
  • angularjs-ng-options
Share Improve this question Follow asked Jun 30, 2014 at 6:14 Shekkar's user avatar ShekkarShekkar 2443 gold badges10 silver badges22 bronze badges 4
  • 2 I think that ng-options, because that is meant to be used in cases like this. – Mritunjay Commented Jun 30, 2014 at 6:16
  • I haven't posted it as an answer if you want I can.\ – Mritunjay Commented Jun 30, 2014 at 11:42
  • yes please ,please provide i am waiting for answer @Mritunjay – Shekkar Commented Jun 30, 2014 at 11:47
  • is it enough "meant to be used in cases like this" ? – Reyraa Commented Dec 1, 2014 at 11:53
Add a comment |

3 Answers 3

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 1

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.

Share Improve this answer Follow answered Jun 30, 2014 at 11:50 Mritunjay's user avatar MritunjayMritunjay 25.9k7 gold badges56 silver badges70 bronze badges Add a comment | 1

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

Share Improve this answer Follow answered Dec 4, 2014 at 8:37 Deblaton Jean-Philippe's user avatar Deblaton Jean-PhilippeDeblaton Jean-Philippe 11.4k4 gold badges52 silver badges68 bronze badges Add a comment | 0

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> Share Improve this answer Follow answered Oct 12, 2015 at 10:26 Marcus Junius Brutus's user avatar Marcus Junius BrutusMarcus Junius Brutus 27.2k45 gold badges199 silver badges346 bronze badges Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid …

  • Asking for help, clarification, or responding to other answers.
  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged
  • javascript
  • json
  • angularjs
  • angularjs-ng-repeat
  • angularjs-ng-options
or ask your own question.

  • The Overflow Blog
  • How developer jobs (and the job market) changed in 2024
  • You should keep a developer’s journal
  • Featured on Meta
  • The December 2024 Community Asks Sprint has been moved to March 2025 (and...
  • Stack Overflow Jobs is expanding to more countries

Linked

26 What are the differences between ng-repeat and ng-options and why do they not behave the same way? 1 not able to access object property angularjs 0 Binding preselected value from model into angular drop down list 0 Using AngularJS, which is optimal with regards to ng-repeat 2 AngularJS Data Structure: Client side or API? 26 What are the differences between ng-repeat and ng-options and why do they not behave the same way? 3 returning object from ng-repeat or ng-options? 3 ng-repeat Efficiency and Working 0 Angular js select ng-options instead of ng-repeat 1 use ng-options or ng-repeat in select? 3 When to use angularJS ng-repeat? 0 Angular ng-repeat vs ng-option 0 What kind of loading JSON to AngularJS is better?

Hot Network Questions

  • Does "To the Moon" generate interest while using the Green Deck?
  • Is it impossible to physically observe whether an action is voluntary (purposeful)?
  • Do you lose the right of attribution if you're charged with a crime?
  • Can you attempt a risky task without risking your mind or body?
  • Equivalence of a function to its truncated power series
  • Consequences of geometric Langlands (or Langlands program) with elementary statements
  • Was Adam given the benefit of the doubt?
  • Does the universe not being locally real mean anything for our daily lives?
  • How was Lemech allowed to hunt?
  • Why does pattern matching with switch on InetAddress fail with 'does not cover all possible input values'?
  • What are the mainstream denominations (if any) of Christian atheists?
  • Almost every Hermitian matrix has distinct eigenvalue differences
  • How to differentiate coyote vs wolf tracks
  • Equality test of two hyperbolic expressions
  • DTFT of an autocorrelation function is producing a complex PSD?
  • Refereeing a maths paper with individually poor-quality results which nevertheless combine two very different subfields
  • CD with physical hole is perfectly readable - how?
  • Can I use copyleft-licensed library in MIT-licensed project?
  • Find the probability that the same boy does not receive both the pens.
  • Where did Tolstoy write that a man is like a fraction?
  • Is the second-quantized density-density interaction positive-definite?
  • Minimum Number of Squares to Color
  • What is the I in "I think therefore I am"?
  • Best word for "[to use as a] crutch"
more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-js

Từ khóa » Ng Repeat Vs Ng Option Có Gì Khác Nhau