ngClick 仅用于列表中的 "this" 个元素 | AngularJS

Question

我有一个用户列表，如果用户单击每个人姓名旁边的 "edit" 图标，他们就会出现选项。

我想让用户一次只能编辑一个人，而不能同时编辑两个或更多人。

示例：如果用户选择编辑图标，则打开编辑选项。如果用户选择另一个人的编辑图标，关闭当前图标并向用户显示下一个选择的编辑选项。

我正在使用切换视图：

ng-click="editDetails = ! editDetails"


ng-class="{ 'unseen': ! editDetails }

这是我的代码：

<div class="col-xs-12 col-md-6 col-md-push-6">
                        <div ng-show="memberNeeded" class="message">Please add hunt group members</div>
                        <h4>Hunt group call order</h4>
                        <div class="list-box">
                            <ul id="finalList" ng-class="{disable: details.disabled}">
                                <li ng-repeat="item in list" switch data-id="{{item.id}}" data-active="{{item.isActive}}" class="clearfix {{control}}">
                                    <strong>{{item.firstName}} {{item.lastName}}</strong>
                                    <i class="vf-i vf-i-pen pull-right" ng-click="editDetails = ! editDetails"></i>
                                    <div class="list-panel clearfix unseen" ng-class="{ 'unseen': ! editDetails }">
                                        <p class="pull-left">
                                            Active &nbsp;
                                        </p>
                                        <div class="pull-left">
                                            <div class="toggle-bg switch-toggle {{control}}">
                                                <label class="{{control}}">{{control}}</label>
                                                <input type="radio" name="toggle" value="off" ng-model="control" ng-click="updateUser($index, 'off')">
                                                <input type="radio" name="toggle" value="on" ng-model="control" ng-click="updateUser($index, 'on')">
                                                <span class="switch {{control}}"></span>
                                            </div>
                                        </div>
                                        <button class="btn btn-del pull-right">Remove</button>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

Answer 1

它不会工作，因为它会切换所有 classes。

如果我是你我会怎么做：

在您的 "item" 对象中添加一个变量 "editActive" 将其默认设置为 false
通过 ng-show="item.editActive"
在你的控制器中创建一个变量 $scope.currentActive
在您的控制器中创建一个函数，该函数将由 ng-click 触发，它将获得 currentActive，如果有，则将其 editActive 值设置为 false。然后设置新的currentActive值，将其editActive设置为true

我觉得应该可以。

Answer 2

如果您一次只想激活一个编辑器，只需存储活动项而不是标志。在 ng-click 上设置 activeItem。示例如下：

在您的控制器中：

$scope.editor = {
    activeEditItem: null
};

您的标记变为：

<div class="col-xs-12 col-md-6 col-md-push-6">
                    <div ng-show="memberNeeded" class="message">Please add hunt group members</div>
                    <h4>Hunt group call order</h4>
                    <div class="list-box">
                        <ul id="finalList" ng-class="{disable: details.disabled}">
                            <li ng-repeat="item in list" switch data-id="{{item.id}}" data-active="{{item.isActive}}" class="clearfix {{control}}">
                                <strong>{{item.firstName}} {{item.lastName}}</strong>
                                <i class="vf-i vf-i-pen pull-right" ng-click="editor.activeEditItem === item ? editor.activeEditItem = null : editor.activeEditItem = item"></i>
                                <div class="list-panel clearfix unseen" ng-class="{ 'unseen': editor.activeEditItem !== item }">
                                    <p class="pull-left">
                                        Active &nbsp;
                                    </p>
                                    <div class="pull-left">
                                        <div class="toggle-bg switch-toggle {{control}}">
                                            <label class="{{control}}">{{control}}</label>
                                            <input type="radio" name="toggle" value="off" ng-model="control" ng-click="updateUser($index, 'off')">
                                            <input type="radio" name="toggle" value="on" ng-model="control" ng-click="updateUser($index, 'on')">
                                            <span class="switch {{control}}"></span>
                                        </div>
                                    </div>
                                    <button class="btn btn-del pull-right">Remove</button>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

ngClick 仅用于列表中的 "this" 个元素 | AngularJS

ngClick for only "this" element in list | AngularJS

angularjs

angularjs-ng-click