ng显示ng隐藏在ng中，重复如何为每个包裹的块单击/触发

ng-show ng-hide in ng-repeat how to click/trigger for each wrapped block

本文关键字：ng 包裹 触发 单击 隐藏 显示      更新时间：2024-06-30

如何点击隐藏/显示div——只隐藏/显示那些封装在li中的div/类，现在如果我点击第一项，两项都会显示。有没有像jQuery一样只检查Angular中的this的方法？

在线示例：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>

这样尝试。简单明了。

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>

相关文章：