make edit按钮视图只有assisiate associate编辑div？

时间：2015-08-11 13:31:29

标签： javascript html angularjs

我有点击toClickEdit项目的问题。当用户点击编辑项目将打开所有具有相同索引的编辑div，例如，如果第一个div中的项目1将打开第二个和第三个div上的所有第一个项目。我创建了这个jsfiddle来说明问题http://jsfiddle.net/u217rsmd/4/#&togetherjs=ToCzE84Tj7 

 angular.module('demoApp', [])
        .controller('mainController', function ($scope) {
        $scope.editingMode = [];
        $scope.backup = [];

        $scope.model = {
            rrnConditionsValues: [{
                formControllerValueName: "a"
            }, {
                formControllerValueName: "b"
            }, {
                formControllerValueName: "c"
            }, {
                formControllerValueName: "d"
            }],
                 rrnConditionsValues2: [{
                formControllerValueName: "e"
            }, {
                formControllerValueName: "f"
            }, {
                formControllerValueName: "g"
            }, {
                formControllerValueName: "h"
            }],
              rrnConditionsValues3: [{
                formControllerValueName: "r"
            }, {
                formControllerValueName: "t"
            }, {
                formControllerValueName: "k"
            }, {
                formControllerValueName: "l"
            }],
        };

        $scope.updateValue = function (value, index) {
            //itemsManagementService.updateValue(value); // just removed for the demo
            $scope.editingMode[index] = false;
        };

        $scope.cancel = function (index) {
            $scope.model.rrnConditionsValues[index].formControllerValueName
                = $scope.backup[index];
            $scope.editingMode[index] = false;
        };

        $scope.toggleEdit = function (index) {
            // save current model value so we can restore it on cancel
            $scope.backup[index] = $scope.model.rrnConditionsValues[index].formControllerValueName;
            console.log($scope.backup);
            $scope.editingMode[index] = !$scope.editingMode[index];
            //$scope.selected = model;
        };

        $scope.deleteValue = function(index) {
            $scope.model.rrnConditionsValues.splice(index,1);
        };
    });

HTML 

<div ng-app="demoApp" ng-controller="mainController">
    <ul>
        <li data-ng-repeat="value in model.rrnConditionsValues">
            <div id="showItem" data-ng-show="!editingMode[$index]">
                <input class="" type="submit" value="Edit" data-ng-click="toggleEdit($index)">
                <input class="" type="submit" value="Delete" data-ng-click="deleteValue($index)">
                <label>{{value.formControllerValueName}}</label>
            </div>
            <div id="editItem" data-ng-show="editingMode[$index]">
                <input class="" type="submit" value="update" data-ng-click="updateValue(value, $index)">
                <input class="" type="submit" value="Cancel" data-ng-click="cancel($index)">
                <input type="text" size="30" data-ng-model="value.formControllerValueName" placeholder="add new  here">
            </div>
        </li>
    </ul>
     <ul>
        <li data-ng-repeat="value in model.rrnConditionsValues2">
            <div id="showItem" data-ng-show="!editingMode[$index]">
                <input class="" type="submit" value="Edit" data-ng-click="toggleEdit($index)">
                <input class="" type="submit" value="Delete" data-ng-click="deleteValue($index)">
                <label>{{value.formControllerValueName}}</label>
            </div>
            <div id="editItem" data-ng-show="editingMode[$index]">
                <input class="" type="submit" value="update" data-ng-click="updateValue(value, $index)">
                <input class="" type="submit" value="Cancel" data-ng-click="cancel($index)">
                <input type="text" size="30" data-ng-model="value.formControllerValueName" placeholder="add new  here">
            </div>
        </li>
    </ul>
                <ul>
        <li data-ng-repeat="value in model.rrnConditionsValues3">
            <div id="showItem" data-ng-show="!editingMode[$index]">
                <input class="" type="submit" value="Edit" data-ng-click="toggleEdit($index)">
                <input class="" type="submit" value="Delete" data-ng-click="deleteValue($index)">
                <label>{{value.formControllerValueName}}</label>
            </div>
            <div id="editItem" data-ng-show="editingMode[$index]">
                <input class="" type="submit" value="update" data-ng-click="updateValue(value, $index)">
                <input class="" type="submit" value="Cancel" data-ng-click="cancel($index)">
                <input type="text" size="30" data-ng-model="value.formControllerValueName" placeholder="add new  here">
            </div>
        </li>
    </ul>
</div>

1 个答案:

答案 0 :(得分：0)

让我们关注toggleEdit方法。这种方法如何在不同的呼叫之间分开？仅将index作为参数发送不会执行此操作。您需要index变量来选择哪个<li>应该具有编辑模式，但您还需要另一个变量来选择应该影响哪个<ul>。
你需要找到一种方法来做到这一点。我可以建议一种非常硬编码的方式，只是为了说明问题并鼓励你寻求更好的解决方案：
将$scope.editingMode = [];替换为：

$scope.editingMode[] = [];
$scope.editingMode[1] = [];
$scope.editingMode[2] = [];
$scope.editingMode[3] = [];

使用以下相应的<{p>}替换data-ng-click="toggleEdit($index)"中的每一个

data-ng-click="toggleEdit($index,0)"
data-ng-click="toggleEdit($index,1)"
data-ng-click="toggleEdit($index,2)"

使用以下相应的<{p>}替换data-ng-click="!toggleEdit($index)"中的每一个

data-ng-click="!toggleEdit($index,0)"
data-ng-click="!toggleEdit($index,1)"
data-ng-click="!toggleEdit($index,2)"

替换

$scope.editingMode[index] = !$scope.editingMode[index];

与

$scope.editingMode[x][index] = !$scope.editingMode[x][index];

请参阅this fiddle

此处为完整代码（添加取消功能）：

<div ng-app="demoApp" ng-controller="mainController">
    <ul>
        <li data-ng-repeat="value in model.rrnConditionsValues">
            <div id="showItem" data-ng-show="!editingMode[0][$index]">
                <input class="" type="submit" value="Edit" data-ng-click="toggleEdit($index,0)">
                <input class="" type="submit" value="Delete" data-ng-click="deleteValue($index)">
                <label>{{value.formControllerValueName}}</label>
            </div>
            <div id="editItem" data-ng-show="editingMode[0][$index]">
                <input class="" type="submit" value="update" data-ng-click="updateValue(value, $index)">
                <input class="" type="submit" value="Cancel" data-ng-click="cancel($index,0)">
                <input type="text" size="30" data-ng-model="value.formControllerValueName" placeholder="add new  here">
            </div>
        </li>
    </ul>
     <ul>
        <li data-ng-repeat="value in model.rrnConditionsValues2">
            <div id="showItem" data-ng-show="!editingMode[1][$index]">
                <input class="" type="submit" value="Edit" data-ng-click="toggleEdit($index,1)">
                <input class="" type="submit" value="Delete" data-ng-click="deleteValue($index)">
                <label>{{value.formControllerValueName}}</label>
            </div>
            <div id="editItem" data-ng-show="editingMode[1][$index]">
                <input class="" type="submit" value="update" data-ng-click="updateValue(value, $index)">
                <input class="" type="submit" value="Cancel" data-ng-click="cancel($index,1)">
                <input type="text" size="30" data-ng-model="value.formControllerValueName" placeholder="add new  here">
            </div>
        </li>
    </ul>
                <ul>
        <li data-ng-repeat="value in model.rrnConditionsValues3">
            <div id="showItem" data-ng-show="!editingMode[2][$index]">
                <input class="" type="submit" value="Edit" data-ng-click="toggleEdit($index,2)">
                <input class="" type="submit" value="Delete" data-ng-click="deleteValue($index)">
                <label>{{value.formControllerValueName}}</label>
            </div>
            <div id="editItem" data-ng-show="editingMode[2][$index]">
                <input class="" type="submit" value="update" data-ng-click="updateValue(value, $index)">
                <input class="" type="submit" value="Cancel" data-ng-click="cancel($index,2)">
                <input type="text" size="30" data-ng-model="value.formControllerValueName" placeholder="add new  here">
            </div>
        </li>
    </ul>
</div>

脚本部分：

 angular.module('demoApp', [])
        .controller('mainController', function ($scope) {
        $scope.editingMode = [];
        $scope.editingMode[0] = [];
        $scope.editingMode[1] = [];
        $scope.editingMode[2] = [];
        $scope.backup = [];

        $scope.model = {
            rrnConditionsValues: [{
                formControllerValueName: "a"
            }, {
                formControllerValueName: "b"
            }, {
                formControllerValueName: "c"
            }, {
                formControllerValueName: "d"
            }],
                 rrnConditionsValues2: [{
                formControllerValueName: "e"
            }, {
                formControllerValueName: "f"
            }, {
                formControllerValueName: "g"
            }, {
                formControllerValueName: "h"
            }],
              rrnConditionsValues3: [{
                formControllerValueName: "r"
            }, {
                formControllerValueName: "t"
            }, {
                formControllerValueName: "k"
            }, {
                formControllerValueName: "l"
            }],
        };

        $scope.updateValue = function (value, index) {
            //itemsManagementService.updateValue(value); // just removed for the demo
            $scope.editingMode[index] = false;
        };

        $scope.cancel = function (index,x) {
            $scope.model.rrnConditionsValues[index].formControllerValueName
                = $scope.backup[index];
            $scope.editingMode[x][index] = false;
        };

        $scope.toggleEdit = function (index,x) {
            // save current model value so we can restore it on cancel
            $scope.backup[index] = $scope.model.rrnConditionsValues[index].formControllerValueName;
            console.log($scope.backup);
            $scope.editingMode[x][index] = !$scope.editingMode[x][index];
            //$scope.selected = model;
        };

        $scope.deleteValue = function(index) {
            $scope.model.rrnConditionsValues.splice(index,1);
        };
    });
相关问题
最新问题