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

click selectively ng-if directive in angular js

本文关键字：ng-if 指令 选择性 angular js      更新时间：2023-09-26

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的新手。当我点击"click me"div，然后我想让ng-if = true结果。然后显示(不是ng-show，它会显示每个元素)指令。有什么方法可以用角的方式来做吗?

这里有一个小提琴:http://jsfiddle.net/4L6qbpoy/5/

你可以这样写:

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

，点击

查看这个jsfiddle

您需要在ng-repeat中将ng-if求值为true。因此，您需要一个条件来计算数组中每个对象的惟一值。

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

要理解，ng-repeat的每个实例都属于控制器的作用域。这意味着重复的n个元素被推到边界，并且只在模板中求值。在这些范围内，您可以访问一个很小的局部作用域，其中包括$index， $first， $odd等。

您可以在这里阅读更多内容:https://docs.angularjs.org/api/ng/directive/ngRepeat

相关文章：