如果else为Angular，则使用ng click函数重复ng

ng-repeat with ng-click function if else Angular

本文关键字：ng click 函数 else Angular 如果      更新时间：2024-01-18

当您在ng class="｛｛sectionClass｝｝"中单击某个addOn时，我想向元素添加一个类。

有更好的方法来实现这一点吗？

我的方法不起作用，我不确定代码出了什么问题。

            $scope.addOns = [
	            {                        
                    name: "Cover options"
                },
                {
                    name: "Stamping"
                }
            ];
            $scope.sectionClass = function(addOn){
            	if (addOn.name == "Cover options")
            		return("covers");
            	else if (addOn.name == "Stamping")
            		return("stamping");
            }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="section-content" ng-class="{{sectionClass}}">	
    <div class="add-on-type" ng-click="sectionClass(addOns)" ng-repeat="addOn in addOns">
        <span>{{addOn.name}}</span>
    </div>
</div>

您错过了

  1. 从ng-repeat ng-click函数传递addon对象，如ng-click="sectionClass(addOn)"

  2. 不要从方法返回字符串，而是设置一个像customClass&在ng-class指令中使用

HTML

<div ng-app="myApp" ng-controller="MyCtrl" >
    <div class="section-content" ng-class="{{customClass}}">
        <div class="add-on-type" ng-click="sectionClass(addOn)" ng-repeat="addOn in addOns"> <span>{{addOn.name}}</span>
        </div>
    </div>
</div>

控制器

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function ($scope) {
    $scope.addOns = [
    {
        name: "Cover options"
    }, {
        name: "Stamping"
    }];
    $scope.sectionClass = function (addOn) {
        if (addOn.name == "Cover options")
            $scope.customClass="covers"
        else if (addOn.name == "Stamping")
            $scope.customClass="stamping"    
    }
});

工作Fiddle

希望这能对你有所帮助。谢谢

相关文章：