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) {

          }
      };
});

我是棱角分明的新手。当我点击“点击我”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

在angular js中选择性地选择ng-if指令

2 个答案: