Question

我正在尝试通过更改类名并使用“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>

JS

//class name change function
    $scope.class = "glyphicon glyphicon-plus" //name of class;
    $scope.changeClass = function(){
        if ($scope.class === "glyphicon glyphicon-plus") //changing one class name on another 
            $scope.class = "glyphicon glyphicon-minus";
         else
            $scope.class = "glyphicon glyphicon-plus";

Answer 1

这里的问题是你的所有行都绑定到同一个变量，这就是每一行图标都会改变的原因。相反，您需要为每一行跟踪一个单独的变量。看起来您已经有一个好的候选人band.index来跟踪选择了哪个图标。

JS

var classes = [];
$scope.getClass = function (index) {
    // Return the current class or a reasonable default
    return classes[index] || 'glyphicon glyphicon-plus';
};
$scope.changeClass = function (index) {
    if (classes[index] === "glyphicon glyphicon-plus") //changing one class name on another 
        classes[index] = "glyphicon glyphicon-minus";
    else
        classes[index] = "glyphicon glyphicon-plus";
};

HTML

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

Answer 2

另一种做同样的方式......

向对象添加类属性

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>

在方法

上设置它

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

仅为一个div

2 个答案: