1

私はangularjsに取り組んでいます。スクリプトを作成しました。ブラウザでアプリケーションを起動すると、このように表示され、

ここに画像の説明を入力

そして少し後に来る結果、

ここに画像の説明を入力

<body>
    <div data-ng-controller="SimpleController">
        Search By Name: <input type="text" data-ng-model="searchTerm" />
        <ul>
            <li data-ng-repeat="cust in customers | filter:searchTerm | orderBy:name">{{cust.name}} - {{cust.city | uppercase}}</li>
        </ul>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    <script type="text/javascript">
        function SimpleController($scope) {
            $scope.customers = [
                { name: 'John', city: 'Barcelona' },
                { name: 'Scott', city: 'Madrid' },
                { name: 'Jennifer', city: 'Seattle' },
                { name: 'Mike', city: 'Atalanta' }
            ];
        }
    </script>
</body>

2番目の写真のようにすべてをロードした後の結果を見たいです。

4

1 に答える 1

6

アプリケーションの準備が整うまで Angular テンプレートを非表示にするngCloakディレクティブが必要です。

<body>
    <div data-ng-controller="SimpleController">
        Search By Name: <input type="text" data-ng-model="searchTerm" />
        <ul data-ng-cloak>
            <li data-ng-repeat="cust in customers | filter:searchTerm | orderBy:name">{{cust.name}} - {{cust.city | uppercase}}</li>
        </ul>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    <script type="text/javascript">
        function SimpleController($scope) {
            $scope.customers = [
                { name: 'John', city: 'Barcelona' },
                { name: 'Scott', city: 'Madrid' },
                { name: 'Jennifer', city: 'Seattle' },
                { name: 'Mike', city: 'Atalanta' }
            ];
        }
    </script>
</body>

編集:<head>これは、Angular をHTML のセクションにロードした場合 (またはngCloakディレクティブを使用する前)にのみ、目的の効果が得られます。ドキュメントの最後で Angular をロードしたい場合は、テンプレートの前にこの CSS を含める必要があります。

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
于 2013-09-16T13:20:40.907 に答える