Question

如何使用ng-click单独切换多个元素上的类？

我想隐藏/显示但是如果我按下一个输入就会显示。

＆＃13;

.controller('AppCtrl',['$scope', function($scope){
        $scope.custom = true;
        $scope.ShowHide = function() {
            $scope.custom = $scope.custom === false ? true: false;
        };
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="item item-checkbox">
                    <label class="checkbox">
                        <input type="checkbox" value="on" ng-click="ShowHide()">
                    </label>
                   Test1
</div>
<div class="item range range-positive" ng-hide="custom">
                 
    <input type="range"  min="0" max="10"   step="1" >
                  
</div>
<div class="item item-checkbox">
                    <label class="checkbox">
                        <input type="checkbox" value="on" ng-click="ShowHide()">
                    </label>
                   Test2
</div>
<div class="item range range-positive" ng-hide="custom">
                 
    <input type="range"  min="0" max="10"   step="1" >
                  
</div>

＆＃13;

Answer 1

因为目前您指的是名称为custom的同一个变量，所以通过在任何地方更改custom值会隐藏具有ng-hide="custom"的两个元素。这些变量应该有不同的名称。

如果使用ng-repeat渲染所有模板会更好，这样在切换标记时也会减少工作量。因为您可以直接使用ng-model复选框和＆amp;然后应用ng-model

复选框item.show

<强>标记

<div ng-repeat="item in items">
    <div class="item item-checkbox">
        <label class="checkbox">
          <input type="checkbox" value="on" ng-model="item.show">
        </label> Test1
    </div>
    <div class="item range range-positive" ng-hide="item.show">
        <input type="range" min="0" max="10" step="1" ng-model="item.range"/>
    </div>
</div>

<强>代码

$scope.items = [
    {Id: 1, Value: true, range: 1 }, //Value true will make checkbox check by default
    {Id: 2, show: true, Range: 1 },
    {Id: 3, show: true, range: 1 },
    {Id: 4, show: true, range: 1 },
    {Id: 5, show: true, range: 1 },
    {Id: 6, show: true, range: 1 },
    {Id: 7, show: true, range: 1 },
]

Toggleclass隐藏显示多个angularjs

1 个答案: