HTML要素属性は、ある条件の場合にのみ作成できますか？

html要素の作成時に、コールバックの設定などの要素属性を除いたり、要素属性を含めて決定することはできますか？HTML要素属性は、ある条件の場合にのみ作成できますか？

ng-repeatフローを使用する場合、クローズコールバックハンドラでhtml要素を作成したい場合があります。場合によっては、ハンドラ定義を閉じるべきではありません。

<div ng-repeat="item in ctrl.items" 
close="ctrl.close()">XYZ</div>

...またはコールバックなし...

<div ng-repeat="item in ctrl.items">XYZ</div>

...多分NG-場合のようなもの？それが可能なのでしょうか？チェック条件はアイテム自体にあります。だから、NGリピート中に私のようないくつかの項目に内部状態を確認する必要があります：私は、この条件のチェックを追加することができますし、私が行ってどれだけ近いかハンドラの追加やない

item.state === 'state1' ? add close handler : do nothing ...

？

乾杯

出典

2017-12-07 ArgV

ng-showも使用しますが、ng-ifも動作します – Luca

これは角度角度ですか、角度ですか？あなたは角をつけたようにタグ付けしましたが、あなたはangularjを探しているようです。 –

あなたがこの問題を解決するためのカスタムディレクティブを使用することができ、ここでの例です：

開閉可能アイテムは、着色されているとonclickイベントリスナーをしている（それをクリックしてください）。

閉じることができるアイテムの状態は、closable-state属性値と一致する必要があります。

式として評価value beeingてのを防ぐためにclosable-state="'value'"を使用するときは、値の周りの単一引用符を使用する必要があります。

値がハードコードされた文字列の場合は、state: "=closableState"をdirectiveから削除し、単にattrs.closableStateを使用して属性値を取得することができます。

希望するものがあります。

angular.module('app', []); 
 

 
angular 
 
    .module('app') 
 
    .controller('ExampleController', ['$scope', function ($scope) { 
 
     $scope.items = [ 
 
      { label: "item1", state: "state1" }, 
 
      { label: "item2", state: "state2" }, 
 
      { label: "item3", state: "state1" }, 
 
     ]; 
 
    }]) 
 
    .directive('closable', function() { 
 
     return { 
 
      restrict: 'A', 
 
      scope: { 
 
       item: "=closable", 
 
       state: "=closableState", 
 
      }, 
 
      link: function (scope, element, attrs) { 
 

 
       var clickListener = function (event) { 
 
        alert("I'm closable !"); 
 
       } 
 

 
       if (scope.item && scope.item.state === scope.state) { 
 
        element.addClass("colored"); 
 
        element.bind("click", clickListener); 
 
       } 
 
      } 
 
     }; 
 
    });

.colored { color: red }

<!doctype html> 
 
<html lang="en" ng-app="app"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 
<body ng-controller="ExampleController"> 
 
    <ul> 
 
    <li ng-repeat="item in items" closable="item" closable-state="'state1'">{{item.label}}</li> 
 
    </ul> 
 
</body> 
 
</html>

出典

2017-12-07 12:53:48

@Argvはあなたの質問に答えましたか？ –

Logical Operator Short Circuit Evaluationを利用してください：

<div ng-repeat="item in ctrl.items" 
    close="item.closable && ctrl.close()">XYZ</div>

item.closableがfalseある場合は、ctrl.close()機能が評価されることはありません。したがって、関数はitem.closableの値に基づいて条件付きで評価されます。

出典

2017-12-07 21:17:43 georgeawg

HTML要素属性は、ある条件の場合にのみ作成できますか？

答えて

関連する問題