0

いくつかの条件 (同じ条件) に従って、Angular の ng-if を使用して表示/非表示になる、別の要素を持つ html ページがあります。

コントローラーで、boolean変数を作成します。

$scope.myCondition = getValue();

私の見解では、ng-ifディレクティブを使用してこの変数をリッスンします。

パフォーマンスが向上するのは次のとおりです。

  1. この条件で複数のよりクリーンなコードを記述します。ng-if

<div>		
	<div ng-if="myCondition" >-- a --</div>
	<div ng-if="!myCondition">-- A --</div>	
	<div>
		-- text, text, text... --
	</div>
	<div ng-if="myCondition" >-- b --</div>
	<div ng-if="!myCondition">-- B --</div>	
	<div>
		-- text, text, text... --
	</div>
	<div ng-if="myCondition" >-- c --</div>
	<div ng-if="!myCondition">-- C --</div>	
	<div>
		-- text, text, text... --
	</div>
</div>

  1. コードの重複を（ビューで）記述しますが、singleを使用しますng-if：

 <div ng-if="myCondition">		
    	<div>-- a --</div>
    	<div>
    		-- text, text, text... --
    	</div>
    	<div>-- b --</div>
    	<div>
    		-- text, text, text... --
    	</div>
    	<div  >-- c --</div>
    	<div>
    		-- text, text, text... --
    	</div>
    </div>
    <div ng-if="!myCondition">		
    	<div>-- A --</div>
    	<div>
    		-- text, text, text... --
    	</div>
    	<div>-- B --</div>
    	<div>
    		-- text, text, text... --
    	</div>
    	<div  >-- C --</div>
    	<div>
    		-- text, text, text... --
    	</div>
    </div>

保守しやすいので、例 No.1 のようにコードを書くことを好みます。$watchしかし、この方法では、それぞれに対して新しい が作成されるのではないかと心配しましたng-if。
あれは正しいですか？Angular$watchは each に対して new を作成しますng-ifが、これは同じ静的条件 (一部の関数の戻り値ではなく、単純な変数) です。

この質問はng-if指令に関して尋ねましたがng-show、ng-hide

4

2 に答える 2

0

を使用して、最初のアプローチと同様の同じ望ましい結果を達成するもう1つのアプローチをng-switch次に示します。これがどのように機能するかのデモです。

以下は、使用したHTMLですng-switch

<body ng-app="switchExample">
  <div ng-controller="ExampleController">
  <input type="text" ng-model ="searchTerm" ng-change="getDisplayText()"/> 
  <code>selection={{searchTerm}}</code>
  <hr/>
  <div class="animate-switch-container"
    ng-switch on="myCondition">
      <div  ng-switch-when="Home">Home page</div>
      <div  ng-switch-when="show test">Test Sample</div>
      <div  ng-switch-default>default</div>
  </div>
</div>
</body>

あなたのJSには

(function(angular) {
    'use strict';
    angular.module('switchExample', ['ngAnimate'])
        .controller('ExampleController', ['$scope', function($scope) {

            $scope.getDisplayText = function() {
                $scope.myCondition = getValue($scope.searchTerm);
            };
            $scope.myCondition = getValue('Home');

            function getValue(input) {
                var cond = input;
                if (input === 'Test') {
                    cond = 'show test';
                }
                return cond;
            };
        }]);
})(window.angular);

ng-switch を使用すると、複数の条件を気にする必要がなくなり、ng-if とは異なり、よりクリーンなコードを維持するのが簡単になります。

于 2016-09-20T19:01:49.773 に答える