Question

我有这个ngRepeat。我想创建某种切换，这样当用户点击按钮时，输入显示我想要隐藏所有其他显示的输入（如果它们已经可见）。

import shapeless._

sealed trait Trait1
case class SimpleClass(a: String) extends Trait1

sealed trait Trait2
case class ComplexClass(a: String, b: String) extends Trait2

trait TC[T]

object TC {
  //Instances for HList
  implicit def hnilInstance: TC[HNil] = ???
  implicit def hconsInstance[H, T <: HList](implicit t: TC[T]): TC[H :: T] = ???

  //Instances for CoProduct
  implicit def cnilInstance: TC[CNil] = ???
  implicit def cconsInstance[H, T <: Coproduct](implicit
    h: TC[H], t: TC[T]
  ): TC[H :+: T] = ???

  //Instances for Generic, relying on HNil & HCons
  implicit def genericInstance[T, H](implicit
    g: Generic.Aux[T, H], t: TC[H]
  ): TC[T] = ???
}

希望这是有道理的。

Answer 1

快速修复：

<ul ng-init="active={}">
     <li ng-repeat="(key, value) in jewel">
         <span ng-show="!($index==active.index)">text here</span>
         <input ng-show="$index==active.index">
         <button ng-click="active.index = $index"></button>
     </li>
 </ul>

如果您正在使用controllerAs，它会产生更清晰的代码，如下所示：（vm是控制器的别名）

<ul>
     <li ng-repeat="(key, value) in jewel">
         <span ng-show="!($index==vm.activeIndex)">text here</span>
         <input ng-show="$index==vm.activeIndex">
         <button ng-click="vm.activeIndex = $index"></button>
     </li>
 </ul>

Answer 2

ng-repeat具有隔离范围，这就是为什么要影响通过父范围内的变量跟踪其可见性所需的所有其他输入。我用例子预示了一个小提琴：http://jsfiddle.net/ancvgc1b/

angular
    .module('myApp', ['ui.bootstrap'])
    .controller('ExampleController', function($scope){
      $scope.jewel = {
        key1: 'Foo',
        key2: 'Bar'
      };
      $scope.visible = { key: 'key1' };

      $scope.setVisible = function(key) {
        $scope.visible.key = key;
      }
    });

<body ng-app="myApp">
  <div ng-controller='ExampleController'>
    <ul>
      <li ng-repeat="(key, value) in jewel">
         <span ng-show="!(visible.key == key)">Text value</span>
         <input ng-show="visible.key == key">
         <button ng-click="setVisible(key)">show input</button>
      </li>
    </ul>
 </div>
</body>

Answer 3

试试这个：

＆＃13;

var app = angular.module('myApp', []);

app.controller('MyCtrl',function($scope) {

$scope.people = [
    {
    id: 1,
    name: "Alpha",
    age: "24",
    clicked : false
    },
{
    id: 2,
    name: "Beta",
    age: "25",
    clicked : false
    }
];

$scope.showInput = function(person,index) {
 person.input = true;
 $scope.index = index;
};

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="person in people">
         <span ng-show="(!person.input && (index != $index))">text here</span>
         <input ng-show="(person.input && (index == $index))">
         <button ng-click="showInput(person,$index)">Show Input</button>
    </li>
  </ul>     
</div>

＆＃13;

Angular show在ng-repeat上隐藏切换

3 个答案: