我是角度js的新手。我正在尝试在按钮单击ng-grid中创建编辑模式

时间:2018-02-16 06:16:15

标签: jquery angularjs asp.net-mvc-4

这是我的代码。

$scope.Editmode = false;

$scope.OpportunitiesData = [{
    Name:"E123", Age:"13", Gender: "Male", Opportunities:"5"
}, {
    Name:"E123", Age:"12", Gender: "Male", Opportunities:"42"
}];

$scope.grdOpportunities = {
    data: 'OpportunitiesData',
    columnDefs: [
        {
            field: 'Name',
            displayName: 'Name',
            width: '20%'
        },
        {
            field: 'Age',
            displayName: 'Age',
            width: '20%'
        },
        {
            field: 'Gender',
            displayName: 'Gender',
            width: '20%'
        },
        {
            filed: 'Opportunities',
            displayName: 'Number of opportunities',
            width: '20%',
            cellTemplate: '<input type="textbox" data-ng-model="row.entity.NumberOfOpportunities" ng-show="Editmode">'+
                          '<span ng-show="!Editmode">{{row.entity.NumberOfOpportunities}}<span>'
        },
        {
            width: '20%',
            cellTemplate: '<a class="btn btn-primary" data-ng-click="grdEditClick()" ng-show="!Editmode">' +
                          '<span class="glyphicon glyphicon-edit"></span> Edit</a>' +
                          '<a class="btn btn-primary" data-ng-click="GetOpportunityDetails()" ng-show="Editmode">' +
                          '<span class="glyphicon glyphicon-ok"></span> Update</a>' +
                          '<a class="btn btn-primary" data-ng-click="grdCancelClick()" ng-show="Editmode">' +
                          '<span class="glyphicon glyphicon-remove"></span> Cancel</a>'
        }],
    enableColumnResize: true,
    enableFiltering: true
};

$scope.grdEditClick = function () {
    $scope.Editmode = true;
    };

我面临的问题是,在这种情况下,当点击EDIT时,所有行都会进入编辑模式。 我只想要点击EDIT按钮的ROW进入编辑模式,并且在给出取消或更新之前应该禁用网格的其余部分。

0 个答案:

没有答案