AngularJS更新表数据

Question

我必须使用AngularJS创建一个简单的CRUD页面。 我可以使用保存按钮添加数据。现在，当点击编辑链接表单时，应该使用行值填充值。我正在使用angular的'.copy'对象来获取数据。

现在文本框成功获取valuse但选择框未更新。并且还希望在单击编辑链接后禁用选择菜单。

以下是代码：

apsApp.controller('clusterController', function ($scope ) {

var uid = 1;
$scope.clusters=[
               {id:0, 'cluster':''},

            ];
$scope.environments = [
                       {name: 'DEV'},
                       {name: 'PROD'},
                       {name: 'QA'},
                       {name: 'Linux_Dev'}
                   ];

$scope.selectedEnvironment = $scope.environments[0];

//add new cluster
 $scope.saveNewClust = function() {

        if($scope.clust.id == null) {
        //if this is new cluster, add it in clusters array
        $scope.clust.id = uid++;
        $scope.clust.environment = $scope.selectedEnvironment.name;
        console.log($scope.clust);
        $scope.clusters.push($scope.clust);
        } 
        else {
        //for existing cluster, find this cluster using id and update it.
            for(i in $scope.clusters) { 
                if($scope.clusters[i].id == $scope.clust.id) {
                $scope.clusters[i] = $scope.clust;              
                    }
            }  
        };

        //clear the add clusters form
        $scope.clust = {};
    };

    //delete cluster
    $scope.remove = function(id) {
        //search cluster with given id and delete it
        for(i in $scope.clusters) {
            if($scope.clusters[i].id == id) {
                confirm("This Cluster will get deleted permanently");
                $scope.clusters.splice(i,1);
                $scope.clust = {};
            }
        }     
    };

    $scope.edit = function(id) {
        //search cluster with given id and update it
            for(i in $scope.clusters) {
                if($scope.clusters[i].id == id) {
                    //we use angular.copy() method to create copy of original object
                    $scope.clust = angular.copy($scope.clusters[i]);  
                }
            }
        };
});

HTML模板是：

<div class="menuContent">   
    <div class="maincontent">
        <div class="article">
        <form>
            <section>
                <!--  Environment -->
                <div class="col-md-6">
                    <label>Environment:</label>
                     <select ng-model="selectedEnvironment" class="form-control" ng-options="environment.name for environment in environments">
                        <option value='' disabled style='display:none;'>
                            Select Environment
                        </option>
                     </select>   
                </div>

                <!--  cluster Name -->
                <div class="col-md-6">
                    <label>Cluster Name:</label>
                    <input type="text" class="form-control" name="clusterName" placeholder="Cluster" ng-model="clust.cluster" required>
                    <br/>
                    <input type="hidden" ng-model="clust.id" />

                </div>
            </section>
                <!-- submit button -->  
            <section class="col-md-12">
                <button type="button" class="btn btn-default pull-right" ng-click="saveNewClust()">Save Cluster</button>
            </section>
        </form> 
        </div>                      
        <!--  table -->
        <div class="article">
             <table class="table table-bordered table-striped">
                <tr>
                    <th colspan="4">
                        <div class="pull-left">Cluster Info</div>
                    </th>
                </tr>
                <tr>
                    <th>#</th>
                    <th>Environment</th>
                    <th>Cluster</th>
                    <th>Edit</th>
                </tr>
                <tr ng-repeat="clust in clusters">
                    <td>{{}}</td>
                    <td>{{clust.environment}}</td>
                    <td>{{clust.cluster}}</td>
                     <td>
                     <a href="" ng-click="edit(clust.id)" title="Edit"><span class="glyphicon glyphicon-edit" ></span></a> | 
                    <a href="" ng-click="remove(clust.id)" title="Delete"><span class="glyphicon glyphicon-trash"></span></a>
                    </td>       
                </tr>
            </table>                                                        
        </div>                      
    </div>              
</div>

Answer 1

我检查了你的代码，并且改变了很多。这是新的javascript部分：

var app = angular.module('myApp', []);

app.controller('clusterController', function ($scope) {

    var uid = 0;
    $scope.clusters = [];

    $scope.environments = [
        {name: 'DEV'},
        {name: 'PROD'},
        {name: 'QA'},
        {name: 'Linux_Dev'}
    ];

    $scope.select = {};
    $scope.select.selectedEnvironment = $scope.environments[0];
    $scope.select.buttonLabel = 'Save Cluster';
    $scope.select.showCancel = false;

    //add new cluster
    $scope.saveNewClust = function () {
        if ($scope.select.id == undefined) {
            //if this is new cluster, add it in clusters array
            $scope.clusters.push({
                id: uid++,
                cluster: $scope.select.cluster,
                environment: $scope.select.selectedEnvironment
            });
        } else {
            //for existing cluster, find this cluster using id and update it.
            $scope.clusters[$scope.select.id].cluster = $scope.select.cluster;
            $scope.select.id = undefined;
            $scope.select.buttonLabel = 'Save Cluster';
            $scope.select.showCancel = false;
        };
        //clear the add clusters form
        $scope.select.cluster = "";
        $scope.select.selectedEnvironment = $scope.environments[0];
    };

    //delete cluster
    $scope.remove = function (id) {
        //search cluster with given id and delete it
        for (i in $scope.clusters) {
            if ($scope.clusters[i].id == id) {
                confirm("This Cluster will get deleted permanently");
                $scope.clusters.splice(i, 1);
                $scope.clust = {};
            }
        }
    };

    $scope.cancelUpdate = function () {
        $scope.select.buttonLabel = 'Save Cluster';
        $scope.select.showCancel = false;
        $scope.select.id = undefined;
        $scope.select.cluster = "";
        $scope.select.selectedEnvironment = $scope.environments[0];
    };
});

首先，将var uid设置为0.不要从1开始，因为要检查的数组也从0开始索引。其次，我添加了一个持久保存数据的对象对于表单，用户选择环境并键入集群的名称。该对象已分配给$scope.select。我们保存了选择框的预选环境。我也在这里保存名称“保存取消”，因为我在编辑了一个群集后就这样做了，按钮的标签从“保存群集”变为“更新群集”。像这样，您的用户将知道他们何时编辑群集或何时添加群集。此外，在编辑群集时，会出现另一个按钮Cancel Update，因此用户也可以停止编辑群集。如果此按钮应显示与否，则保存在$scope.select.showCancel。

saveNewClust函数处理两个例程，一个用于保存，一个用于更新。因此删除了编辑功能。我添加了另一个函数cancelUpdate，在用户取消操作时调用该函数。

这是HTML部分。我刚刚更新了表单，以便在用户点击编辑时使用新的select对象和ng-click例程。现在，选择框被ng-switch包围。如果用户编辑现有群集，则禁用选择框。

<div ng-controller="clusterController" class="menuContent">
    <div class="maincontent">
        <div class="article">
            <form>
                <section>
                    <!--  Environment -->
                    <div class="col-md-6">
                        <label>Environment:</label>
                        <span ng-switch on="select.showCancel">
                            <select ng-switch-when="true" disabled ng-model="select.selectedEnvironment" class="form-control"
                            ng-options="environment.name for environment in environments">
                                <option value='' disabled style='display:none;'>
                                Select Environment
                                </option>
                            </select>
                            <select ng-switch-default ng-model="select.selectedEnvironment" class="form-control"
                            ng-options="environment.name for environment in environments">
                                <option value='' disabled style='display:none;'>
                                Select Environment
                                </option>
                            </select>
                        </span>

                    </div>

                    <!--  cluster Name -->
                    <div class="col-md-6">
                        <label>Cluster Name:</label>
                        <input type="text" class="form-control" name="clusterName" placeholder="Cluster"
                        ng-model="select.cluster" required>
                            <br/>
                            <input type="hidden" ng-model="clust.id"/>

                        </div>
                    </section>
                    <!-- submit button -->
                    <section class="col-md-12">
                        <button type="button" class="btn btn-default pull-right" ng-click="saveNewClust()">{{select.buttonLabel}}
                        </button>
                        <button ng-show="select.showCancel" type="button" class="btn btn-default pull-right" ng-click="cancelUpdate()">Cancel update
                        </button>
                    </section>
                </form>
            </div>
            <!--  table -->
            <div class="article">
                <table class="table table-bordered table-striped">
                    <tr>
                        <th colspan="4">
                            <div class="pull-left">Cluster Info</div>
                        </th>
                    </tr>
                    <tr>
                        <th>#</th>
                        <th>Environment</th>
                        <th>Cluster</th>
                        <th>Edit</th>
                    </tr>
                    <tr ng-repeat="clust in clusters">
                        <td>{{}}</td>
                        <td>{{clust.environment.name}}</td>
                        <td>{{clust.cluster}}</td>
                        <td>
                            <a href="" ng-click="select.selectedEnvironment = clust.environment; select.cluster = clust.cluster; select.id = clust.id; select.buttonLabel='Update Cluster'; select.showCancel = true" title="Edit"><span class="glyphicon glyphicon-edit"></span>Edit</a>
                        |
                            <a href="" ng-click="remove(clust.id)" title="Delete"><span
                            class="glyphicon glyphicon-trash"></span>Delete</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

以下是用于测试的jsfiddle：http://jsfiddle.net/hv7Pb/