在angular js中有選擇地單擊ng-if指令

Question

HTML：

<div ng-app="myApp" ng-controller="someController as Ctrl">
<div class="clickme" ng-repeat="elems in Ctrl.elem" ng-click="Ctrl.click(elems.title)">
    {{elems.title}}
    <span>click me</span>
    <div id="container">
        <test-Input title="elems.title" data="elems.id" ng-if="Ctrl.myId==" >/test-Input>
    </div>
</div>

JS：

var Elems = [
    {
         title : "First",
         id : 1
    },
    {
         title : "Second",
         id : 2
    },
    {
         title : "Third",
         id : 3
    }
];

var myApp = angular.module('myApp', []);
myApp.controller('someController', function($scope) {
    var self = this;
    self.elem = Elems;
    self.myId = false;
    self.click = function(data){
        self.myId = data;
    };
});

myApp.directive('testInput',function(){
     return {
          restrict: 'E',

          scope: {
              myTitle: '=title',
              myId: '=data'
          },
          template: '<div>{{myTitle}}</div>',
          controller: function($scope) {

          }
      };
}); 

我是angular js的新手。 當我單擊“單擊我” div時，我想使ng-if = true。 然后顯示（而不是ng-show它將渲染每個元素）指令。 有什么辦法可以做到斜角嗎？

這是一個小提琴： http : //jsfiddle.net/4L6qbpoy/5/

Answer 1

您可以使用類似：

<test-Input title="elems.title" data="elems.id" ng-if="elems.isVisible"></test-Input>

並點擊切換

看看這個jsfiddle

Answer 2

您需要在ng-repeat中將ng-if評估為true。 因此，您需要一個條件來評估數組中每個對象的唯一值。

ng-if="Ctrl.myId==elems.title"

要理解，每個ng-repeat實例都屬於控制器的范圍。 這意味着ng重復元素被推到邊界，僅在模板中評估。 在這些范圍內，您可以訪問一個很小的本地范圍，其中包括$ index，$ first，$ odd等。

您可以在此處閱讀更多信息： https : //docs.angularjs.org/api/ng/directive/ngRepeat