3

JSONデータをドロップダウンリストに表示する必要があります.2つのオプションがあります.1つはng-repeatを使用し、もう1つはng-optionsです.

ng-リピートコード:

htmlファイルで：

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

およびスクリプトファイルで：

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

および他の 1 つの ng-options :

htmlファイルで：

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

スクリプト ファイル内:

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

今、パフォーマンスを改善するために私のプロジェクトに最適なものを知りたいです。ガイドラインを教えてください。

4

3 に答える 3

1

パフォーマンスを考慮する限り、それを処理する独自のディレクティブを使用する必要があると思います。

ng-options はすべての要素を $watch に入れます => リストに何百もの要素が含まれている場合、非常に遅くなります

ng-repeat はレンダリングが遅くなります。

次に、独自のディレクティブを使用することを好み、それに html をビルドする必要があります。

于 2014-12-04T08:37:38.687 に答える
1

このような場合に使用することを意図しているため、ng-options だと思います。

Angularjs ドキュメント:-

ngOptions は、選択モデルを文字列以外の値にバインドする場合に ngRepeat の代わりに使用する要素のイテレータ機能を提供します。これは、現在、オプション要素は文字列値にのみバインドできるためです。

于 2014-06-30T11:50:32.593 に答える
0

以下のコード (これもPlunkerにあります) は、モデルが文字列以外の値 (算術コード) にバインドされている場合でも違いを示していません。 ただし、 with を使用したアプローチがデフォルト値の表示に失敗する初期化を除きng-repeatます (または、そのための回避策がある可能性があります)。同じように）。値が選択された後の動作は同じです。

<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>
于 2015-10-12T10:26:38.893 に答える