Question

首先，从这开始有点困惑。我有一个简单的表，其中的内容从数据库中提取并使用Angular注入DOM。

该表由一个选项及其值组成。我希望用户能够编辑这些值，然后单击“保存”按钮，在那里我使用详细信息对我的后端进行http调用。

我已经掌握了基础知识，单击按钮，输入字段将替换表格单元格内容：

enter image description here

点击“修改”：

enter image description here

单击“取消”时，它会恢复 - 所以这一切都正常。

所以这一点我无法解决，当我按下更新时，我想创建一个数组（json？），我可以使用http发送到某处。

我需要一些数组/ json中的每个对象都包含“option”和“value”的东西，所以我可以在数据库中匹配这些。

我的HTML：

<div ng-hide="loading" class="table-responsive">    
    <table class="table table-striped table-compact table-bordered">
        <thead>
            <tr>
                <th>Option</th>
                <th>Value</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="setting in settings">
                    <td><< setting.option >> <i class="fa fa-question pull-right pointer" tooltip="<< setting.description >>" ></i></td>
                    <td ng-switch="status">
                                <input ng-switch-when="editable" type="text" class="form-control" value="<< setting.value >>" />
                                <span ng-switch-when="uneditable"><< setting.value >></span>
                    </td>
            </tr>
        </tbody>
    </table>
</div>


<div ng-hide="loading" ng-switch="status">
        <button ng-switch-when="uneditable" ng-click="edit()" class="btn btn-sm btn-info">Edit</button>
        <button ng-switch-when="editable" ng-click="save()" class="btn btn-sm btn-success">Update</button>
        <button ng-switch-when="editable" ng-click="cancel()" class="btn btn-sm btn-danger">Cancel</button>
</div>

最后我的控制器：

app.controller('appSettingsController', function($scope, ApplicationSettings) {

    $scope.settings = {};
    $scope.loading = true;
    $scope.status = 'uneditable';

    // Grab data for table
    ApplicationSettings.get()
        .success(function(data) {
            $scope.settings = data;
            $scope.loading = false;
        });

    $scope.edit = function() {
        $scope.status = 'editable';
        $scope.updates = {};
    };

    $scope.cancel = function() {
        $scope.status = 'uneditable';
    };

    $scope.save = function() {

        // Construct Array/JSON of inputs

    };

});

有人有任何想法吗？我觉得这与使用ng-model有关？

Answer 1

在表格中，第二列在编辑模式下具有以下输入元素标记：

<input ng-switch-when="editable" type="text" class="form-control"
 value="<< setting.value >>" />

首先 - 我认为value属性应该是{{setting.value}}而不是<< setting.value >> - 我无法想象后者在AngularJS中给出了值。

现在，满足您的要求。您可以在猜到时使用ng-model属性，而不是使用value属性。

使用ng-model属性，输入现在应为：

<input ng-switch-when="editable" type="text" class="form-control"
 ng-model="setting.value" />

ng-model将负责显示该输入的值以及由于双向数据绑定，输入到输入中的值将存储回setting.value。

这意味着，当您在文本框中输入内容时，AngularJS会自动更新$scope.settings。您不必编写任何其他代码来确保放回该值。这就像点击了更新按钮并保存了数据 - 只是没有点击它但数据仍然保存

唯一的缺点是，当您单击取消时，旧值不再可用（因为您在文本中键入内容时，值会更新）。在切换到编辑模式之前，您可以将$scope.settings的初始值存储到另一个变量中。这样，当您单击取消时，您仍然保留旧值。

Angular：单击时，将输入字段文本添加到数组

1 个答案: