NG-NG展示隐藏在NG-重复怎么点击/触发每个包裹块 [英] ng-show ng-hide in ng-repeat how to click/trigger for each wrapped block

问题描述

如何点击隐藏/显示div的只是这些div /其包装在班丽，现在如果我单击第一个项目，这两个项目成为展示。有没有办法像jQuery只是检查这个在角？

在线样本： http://jsfiddle.net/qp0x1zcc/

 ＆LT; D​​IV NG-应用=editerNG控制器=myCtrl级=容器＆GT;
  ＆LT; UL NG重复=中的项项＆GT;
    ＆LT;李NG点击=秀=秀！NG-的init ='显示=假'＆GT;
      ＆LT;跨度NG隐藏=秀＆GT; {{item.name}}＆LT; / SPAN＆GT;
      ＆LT;形式NG秀=秀＆GT;
        ＆LT;输入NG模型=item.name＆GT;
      ＆LT; /表及GT;
    ＆LT; /李＆GT;
    ＆LT;李NG点击=秀=秀！＆GT;
      ＆LT;跨度NG隐藏=秀＆GT; {{item.d}}＆LT; / SPAN＆GT;
      ＆LT;形式NG秀=秀＆GT;
        ＆LT;输入NG模型=item.d＆GT;
      ＆LT; /表及GT;
    ＆LT; /李＆GT;
  ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

解决方案

尝试这样。简单明了。

\r

\r

VAR editer = angular.module（editer，[]）;\r
功能myCtrl（$范围）{\r
$ scope.index = -1;\r
  $ scope.index2 = -1;\r
  $ scope.items = [{\r
    名称：第1项\r
    D：名称1\r
  }，{\r
    名称：第2项\r
    D：名称2\r
  }，{\r
    名称：项＃3\r
    D：3名\r
  }];\r
  $ scope.setIndex =功能（项目）{\r
    $ scope.index = $ scope.items.indexOf（项目）;\r
     $ scope.index2 = -1;\r
  \r
  }\r
    $ scope.setIndex2 =功能（项目）{\r
       $ scope.index = -1;\r
     $ scope.index2 = $ scope.items.indexOf（项目）;\r
  \r
  }\r
  \r
  $ scope.clearIndex =功能（）{\r
    $ scope.index = -1;\r
     $ scope.index2 = -1;\r
    }\r
  \r
}

\r

.container {\r
  的margin-top：10px的;\r
  FONT-FAMILY：宋体;\r
}\r
\r
.container头{\r
  填充底：20px的;\r
  下边框：1px的纯黑色;\r
}\r
\r
UL，\r
输入，\r
。容器 {\r
  填充：10px的;\r
}

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=editerNG控制器=myCtrl级=容器＆GT;\r
\r
\r
  ＆LT; UL NG重复=中的项项＆GT;\r
\r
    ＆LT;李NG点击=setIndex（项目）NG-DBLCLICK =clearIndex（）＆GT;\r
      ＆LT;跨度NG秀=！指数= $指数＆GT; {{item.name}}＆LT; / SPAN＆GT;\r
      ＆LT;形式NG秀=指数== $指数＆GT;\r
        ＆LT;输入NG模型=item.name＆GT;\r
      ＆LT; /表及GT;\r
    ＆LT; /李＆GT;\r
     ＆LT;李NG点击=setIndex2（项目）NG-DBLCLICK =clearIndex（）＆GT;\r
           ＆LT;跨度NG秀=！索引2 = $指数＆GT; {{item.d}}＆LT; / SPAN＆GT;\r
      ＆LT;形式NG秀=索引2 == $指数＆GT;\r
        ＆LT;输入NG模型=item.d＆GT;\r
      ＆LT; /表及GT;\r
    ＆LT; /李＆GT;\r
  ＆LT; / UL＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

How to click to hide/show divs just those divs/classes which are wrapped in li , now if I click the first item, both items become to show. Is there a way like jQuery to just check this in Angular ?

Online sample: http://jsfiddle.net/qp0x1zcc/

 <div ng-app="editer" ng-controller="myCtrl" class="container">
  <ul ng-repeat="item in items">
    <li ng-click="show = !show" ng-init='show = false'>
      <span ng-hide="show">{{item.name}}</span>
      <form ng-show="show">
        <input ng-model="item.name">
      </form>
    </li>
    <li ng-click="show = !show">
      <span ng-hide="show">{{item.d}}</span>
      <form ng-show="show">
        <input ng-model="item.d">
      </form>
    </li>
  </ul>
</div>

解决方案

try like this. simple and clear.

var editer = angular.module('editer', []);
function myCtrl($scope) {
$scope.index = -1;
  $scope.index2 = -1;
  $scope.items = [{
    name: "item #1",
    d: "names 1"
  }, {
    name: "item #2",
    d: "names 2"
  }, {
    name: "item #3",
    d: "names 3"
  }];
  $scope.setIndex = function(item){
    $scope.index = $scope.items.indexOf(item);
     $scope.index2 = -1;
  
  }
    $scope.setIndex2 = function(item){
       $scope.index = -1;
     $scope.index2 = $scope.items.indexOf(item);
  
  }
  
  $scope.clearIndex = function(){
    $scope.index = -1;
     $scope.index2 = -1;
    }
  
}

.container {
  margin-top: 10px;
  font-family: arial;
}

.container header {
  padding-bottom: 20px;
  border-bottom: 1px solid black;
}

ul,
input,
.container {
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="editer" ng-controller="myCtrl" class="container">


  <ul ng-repeat="item in items">

    <li ng-click="setIndex(item)"  ng-dblClick = "clearIndex()">
      <span ng-show="index != $index">{{item.name}}</span>
      <form ng-show="index == $index">
        <input ng-model="item.name">
      </form>
    </li>
     <li ng-click="setIndex2(item)"  ng-dblClick = "clearIndex()">
           <span ng-show="index2 != $index">{{item.d}}</span>
      <form ng-show="index2 == $index">
        <input ng-model="item.d">
      </form>
    </li>
  </ul>
</div>

这篇关于NG-NG展示隐藏在NG-重复怎么点击/触发每个包裹块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！