Question

目标：在ng-repeat上，来自数组的初始'isSelected'有图标。如果在显示后点击了任何项目，则先前的项目isSelected = false并删除了图标，当前项目的isSelected = true并获得图标。

当前的HTML：

<a data-ng-repeat="style in webStyles" id="{{style.id}}" data-ng-click="changeStyle(style.id)">
       <!-- only if item isSelected = true -->
                <i class="fa fa-check fa-fw" id="skin-checked"></i>
       <!-- end selected icon -->
    {{style.name}}
 </a>

控制器：

changeStyle点击事件：

$scope.changeStyle = function (style) {
    $scope.$emit('websiteStyleChange', style);
   // toDo: make all isSelected false, make item just clicked isSelected = true

};

数据：

$scope.webStyles = [
    { name: "Default", id: "style_0", isSelected: true},
    { name: "One", id: "style_1", isSelected: false},
    { name: "Two", id: "style_2", isSelected: false}
];

有什么想法吗？

谢谢...... 。

Answer 1

您可以在每次点击后循环浏览您的webStyles，并将所有isSelected设置为false，除了刚刚点击的那个。例如......

$scope.changeStyle = function (style) {
    angular.forEach($scope.webStyles, function (value, key) {
        value.isSelected = value.id === style ? true : false;
    });
};

然后，要显示/隐藏您的图标，请使用ng-show指令..

<i class="fa fa-check fa-fw" id="skin-checked" ng-show="style.isSelected"></i>

AngularJs - 在ng-repeat中单击ng-click时添加/删除图标

1 个答案: