Javascript 仅更改一个div的类名_Javascript_Html_Angularjs

Javascript 仅更改一个div的类名

javascript html angularjs

Javascript 仅更改一个div的类名,javascript,html,angularjs,Javascript,Html,Angularjs,我试图通过更改类名并使用“ng click”事件来更改“-”上的“+”元素，但它会更改所有div中“-”上的所有“+”元素你知道如何只在我点击的那个div中修改它吗这是我的密码 <body> <div ng-app="myApp" ng-controller="myCtrl"> <div class="margin-display" > <div class="panel-group" id="accordion" >

我试图通过更改类名并使用“ng click”事件来更改“-”上的“+”元素，但它会更改所有div中“-”上的所有“+”元素

你知道如何只在我点击的那个div中修改它吗

这是我的密码

<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <div class="margin-display" >
        <div class="panel-group" id="accordion" >
            <div class="panel panel-default" ng-repeat="band in bands">
                <div ng-class="$even ? 'odd' : 'even'">
                    <h4 class="panel-title">
                        <!-- calling ng-click event  with  changeClass() function-->
                        <div ng-click="changeClass()" data-toggle="collapse" data-parent="#accordion" ng-href="#collapse{{band.index}}" > 
                            <img ng-src="{{band.image}}" alt=""> 
                            <p class="output">{{band.artist}}</p>
                            <p class="output">{{band.track}}</p>  
                            <p class="output">{{band.collection}}</p>  
                            <p class="output">{{band.genre}}</p>    
                            <span ng-class="class"></span> <!-- class name change--> 
                        </div>
                    </h4>
                </div>
                <div ng-attr-id="collapse{{band.index}}" class="panel-collapse collapse">
                    <div class="panel-body" ng-class="$even ? 'odd' : 'even'" >
                        <div>   
                            <h3>{{band.artist}} - {{band.track}}</h3>
                            <p><strong>Collection: </strong> {{band.collection}}</p>  
                            <p><strong>Track Count: </strong>{{band.trackAmount}}</p>  
                            <p><strong>Price: </strong>{{band.collPrice}} USD</p>  
                            <p><strong>Duration: </strong>{{band.trackDuration | date:'mm:ss'}} min</p> 
                            <p><strong>Track Price:</strong>{{band.collPrice}} USD</p> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

这里的问题是所有行都绑定到同一个变量，这就是为什么每行的图标都会更改。相反，您需要为每行跟踪一个单独的变量。看起来您已经有了一个很好的候选者，

band.index

，来跟踪选择了哪个图标

HTML


{{band.artist}
{{band.track}}
{{band.collection}}
{{band.genre}

另一种做同样事情的方法

向对象添加类属性

var plusClass = "glyphicon glyphicon-plus";
var minusClass = "glyphicon glyphicon-minus";

$scope.bands = [
    {...  ,  "genre":"aaa", "class": plusClass},
    {.... , "genre":"bbb", "class": plusClass}
];

将band.class属性指定给html类属性。将索引作为函数的参数传递

      <div ng-click="changeClass($index)" data-toggle="collapse" data-parent="#accordion" ng-href="#collapse{{band.index}}" >
             <img ng-src="{{band.image}}" alt="">
             <p class="output">{{band.artist}}</p>
             <p class="output">{{band.track}}</p>
             <p class="output">{{band.collection}}</p>
             <p class="output">{{band.genre}}</p>
             <span ng-class="{{band.class}}"></span> <!-- class name change-->
      </div>

<div ng-click="changeClass(band.index)" data-toggle="collapse" data-parent="#accordion" ng-href="#collapse{{band.index}}" > 
    <img ng-src="{{band.image}}" alt=""> 
    <p class="output">{{band.artist}}</p>
    <p class="output">{{band.track}}</p>  
    <p class="output">{{band.collection}}</p>  
    <p class="output">{{band.genre}}</p>    
    <span ng-class="getClass(band.index)"></span> <!-- class name change--> 
</div>

var plusClass = "glyphicon glyphicon-plus";
var minusClass = "glyphicon glyphicon-minus";

$scope.bands = [
    {...  ,  "genre":"aaa", "class": plusClass},
    {.... , "genre":"bbb", "class": plusClass}
];

      <div ng-click="changeClass($index)" data-toggle="collapse" data-parent="#accordion" ng-href="#collapse{{band.index}}" >
             <img ng-src="{{band.image}}" alt="">
             <p class="output">{{band.artist}}</p>
             <p class="output">{{band.track}}</p>
             <p class="output">{{band.collection}}</p>
             <p class="output">{{band.genre}}</p>
             <span ng-class="{{band.class}}"></span> <!-- class name change-->
      </div>

$scope.changeClass = function(index) {
   var actualClass = $scope.bands[index].class;
   $scope.bands[index].class = (actualClass === plusClass) ? minusClass : plusClass;
}