如何在AngularJS中修改和更新数据表行？

17 浏览
0 Comments

如何在AngularJS中修改和更新数据表行？

我正在学习AngularJS，发现了一个问题。我正在创建一个新的项目。我有一些按钮：编辑、添加、删除。如果我点击编辑按钮，显示所有字段，但我只想显示当前字段，然后点击更新来更新这个字段。我的代码如下：

var app = angular.module('addApp', []);
app.controller('modifyCtrl', ['$scope', function($scope){
    $scope.tabelsData= [
        {'name':'rohit', 'dob':'15-august-1985', 'emailId':'[email protected]', 'phone':'9999999999', 'address':'Delhi Rohini', 'id':'0' },
        {'name':'aman', 'dob':'26-july-1975', 'emailId':'[email protected]', 'phone':'9874563210', 'address':'Haryana Sonepat', 'id':'1' },
        {'name':'devraj', 'dob':'27-march-1980', 'emailId':'[email protected]', 'phone':'7410258963', 'address':'Punjab AmritSar', 'id':'2' }
    ];
    $scope.modify = function(tableData){
        $scope.modifyField = true;
        $scope.viewField = true;
    };
    $scope.update = function(tableData){
        $scope.modifyField = false;
        $scope.viewField = false;
    };
}]);

HTML代码如下：


    
        

            姓名：
            出生日期：
            电子邮件：
            电话号码：
            地址：
            操作：
        

    
    
        

            

                
                    {{tableData.name | uppercase}}
                    
                
                
                    {{tableData.dob}}
                    
                
                
                    {{tableData.emailId}}
                    
                
                
                    {{tableData.phone}}
                    
                
                
                    {{tableData.address}}

CSS代码如下：

table td, table th{
    border:solid 1px red;
    padding:5px;
}

引用AngularJS库：

注意：以上是将内容翻译成中文的精炼语言版本，可能会有一些细微的差别。

0