Question

所以有一个angular.js最佳实践，而如果我说4个div都包含文本而一个被点击，它会显示div的隐藏部分，然后如果点击另一个div，它会关闭显示的前一个'隐藏'部分，但然后显示新点击的div的隐藏部分？

在过去，这需要一些jquery代码，但一直在考虑如何将ng-toggle与ng-show和ng-hide结合起来，或者这只是矫枉过正而且有更好的做法吗？ / p>

非常感谢。

Answer 1

我想这将是最优化的方法。如果你不了解任何事情，欢迎你问我。

＆＃13;

var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.hiddenDivs = [ 
                          { id: 1, shown: false },
                          { id: 2, shown: false },
                          { id: 3, shown: false },
                          { id: 4, shown: false } 
                        ];
    $scope.showOwn = function(index) {
      for(var i=0; i<$scope.hiddenDivs.length; i++) {
        if(index === i+1){
          $scope.hiddenDivs[i].shown = true;
        } else {
          $scope.hiddenDivs[i].shown = false;
        }
      }
    }
});

＆＃13;

.my_div {
  padding: 20px;
  border: 1px solid;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
<div ng-controller="validateCtrl">

<div ng-repeat="hiddenDiv in hiddenDivs">
  <div class="my_div" ng-click="showOwn(hiddenDiv.id)">Content {{hiddenDiv.id}}
    <div ng-show="hiddenDiv.shown">Shown Inner Content {{hiddenDiv.id}}</div>
  </div>
</div>
  
</div>
</div>

＆＃13;

在几个div上切换ng-show

1 个答案: