Fatal编程技术网
  • angularjs/
  • Angularjs ng repeat上的角度显示隐藏切换

Angularjs ng repeat上的角度显示隐藏切换

angularjs

Angularjs ng repeat上的角度显示隐藏切换,angularjs,Angularjs,我重复这个。我想创建某种类型的切换，这样当用户单击按钮时，输入显示，但是，我想隐藏所有其他显示的输入（如果它们已经可见） 此处文本 希望这有意义。快速修复： <ul ng-init="active={}"> <li ng-repeat="(key, value) in jewel"> <span ng-show="!($index==active.index)">text here</span>

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

    

  • 
此处文本

    •
希望这有意义。

快速修复：

<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 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是控制器的别名）

    

  • 
此处文本

    • 



ng repeat
具有独立的作用域，这就是为什么要影响所有其他输入，您需要通过父作用域中的变量跟踪其可见性。我预先准备了一个例子：

angular
.module（'myApp'，['ui.bootstrap']））
.controller（'ExampleController'，函数（$scope）{
$scope.jewel={
键1:‘Foo’，
键2:‘酒吧’
};
$scope.visible={key:'key1'}；
$scope.setVisible=函数（键）{
$scope.visible.key=key；
}
});

    

  • 
文本值
显示输入

    • 



ng repeat
具有独立的作用域，这就是为什么要影响所有其他输入，您需要通过父作用域中的变量跟踪其可见性。我预先准备了一个例子：

angular
.module（'myApp'，['ui.bootstrap']））
.controller（'ExampleController'，函数（$scope）{
$scope.jewel={
键1:‘Foo’，
键2:‘酒吧’
};
$scope.visible={key:'key1'}；
$scope.setVisible=函数（键）{
$scope.visible.key=key；
}
});

    

  • 
文本值
显示输入

    •
试试这个：

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'MyCtrl'，函数（$scope）{
$scope.people=[
{
id:1，
名称：“阿尔法”，
年龄:"24岁",，
单击：false
},
{
id:2，
名称：“测试版”，
年龄:"25岁",，
单击：false
}
];
$scope.showInput=功能（人员，索引）{
person.input=true；
$scope.index=索引；
};
});



    

  • 
此处文本
显示输入

    • 



试试这个：



var-app=angular.module（'myApp'，[]）；
应用程序控制器（'MyCtrl'，函数（$scope）{
$scope.people=[
{
id:1，
名称：“阿尔法”，
年龄:"24岁",，
单击：false
},
{
id:2，
名称：“测试版”，
年龄:"25岁",，
单击：false
}
];
$scope.showInput=功能（人员，索引）{
person.input=true；
$scope.index=索引；
};
});



    

  • 
此处文本
显示输入

    • 



ng repeat生成子作用域，而不是隔离作用域。解决方案还可以，但可以简化。ng-repeat生成子作用域，而不是隔离作用域。解决方案还可以，但可以简化。您是否尝试过ng show=“！showMe”和输入ng hide=“！showMe”您是否尝试过ng show=“！showMe”和输入ng hide=“！showMe”

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



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>