Question

我有一个用户列表，如果用户点击＆＃34;编辑＆＃34;每个人名旁边的图标都会显示选项。

我想要这样做，以便用户一次只能编辑一个人而不能编辑，一次只能编辑两个或更多人。

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

我用来切换视图：

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

如果您一次只想激活一个编辑器，只需存储活动项而不是标志。在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>

Answer 2

它不起作用，因为它会切换所有类。

如果我是你，我会怎么做：

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

我认为应该有效。

ngClick只列出列表中的“this”元素AngularJS

2 个答案: