Question

我使用单选按钮在ng-grid上工作。

单选按钮的cellTemplate如下：

cellTemplate: '<div class="user-radio"><input type="radio" name="rdUserList" ng-model="radioInitial" ng-change="selecteUserFromGrid(row.entity)"></div>'

根据无线电选择，我必须启用一个按钮

$scope.selecteUserFromGrid = function(rowEntity) {
    $scope.selectedUser = rowEntity;
    $scope.isUserSelectDisable = false;
};

我在这里遇到两个问题：

1）如果我选择任何单选按钮并更改排序顺序，则单选按钮位置不会随所选行一起移动。     例如：如果我选择 Ashwin [第一行]行的单选按钮并更改排序顺序，则仍会为第一行选择单选按钮，而不是记录。

2）当我再次搜索时清除现有的单选按钮，使用代码：$('input[name=rdUserList]').attr('checked', false);。   但它引起的问题是，当我再次搜索并从网格中选择相同的行时，选择按钮未启用

Plunker：http://plnkr.co/edit/boITWsKGTSvyZg5zjowd

Answer 1

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

app.controller('MyCtrl', function($scope, $filter) {

    //Initiate 
    $scope.showGrid = false;
    $scope.radioInitial = false;
    $scope.isUserSelectDisable = true;
    $scope.selectedUser = [];

    // Actual result
    $scope.myData = [{
        firstName: "Vedikka",
        lastName: "Vasu",
        empNumber: 24,
        changeable: false
    }, {
        firstName: "Trisha",
        lastName: "Prasanna",
        empNumber: 10,
        changeable: false
    }, {
        firstName: "Dinesh",
        lastName: "Selva",
        empNumber: 22,
        changeable: false
    }, {
        firstName: "Nirmal",
        lastName: "Raja",
        empNumber: 18,
        changeable: false
    }, {
        firstName: "Ashwin",
        lastName: "Senthil",
        empNumber: 08,
        changeable: false
    }, {
        firstName: "Tamil",
        lastName: "Alagan",
        empNumber: 20,
        changeable: false
    }, {
        firstName: "Jaivant",
        lastName: "Prakash",
        empNumber: 16,
        changeable: false
    }, {
        firstName: "Pranav",
        lastName: "Visnu",
        empNumber: 12,
        changeable: false
    }];

    $scope.onclickSearch = function() {
        $scope.showGrid = true;
        $scope.selectedUser = [];

        $('input[name=rdUserList]').attr('checked', false);
        $scope.isUserSelectDisable = true;

        // Set default sorting properties
        $scope.gridOptions.sortInfo.fields[0] = 'firstName';
        $scope.gridOptions.sortInfo.directions[0] = 'asc';
    };

    $scope.selecteUserFromGrid = function(rowEntity) {
        //alert('From radio selection ' + rowEntity.empNumber);
        $scope.selectedUser = rowEntity;
        $scope.isUserSelectDisable = false;
    };

    $scope.onSelectUser = function() {
        alert($scope.selectedUser.firstName + ' ' + $scope.selectedUser.empNumber);
    };
    $scope.selID = 2;
    // Grid declaration
    $scope.gridOptions = {
        data: 'myData',
        enableSorting: true,
        sortInfo: {
            fields: [],
            columns: [],
            directions: []
        },
        useExternalSorting: true,
        columnDefs: [{
            field: 'changeable',
            displayName: '',
            cellTemplate: '<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-model="row.entity.changeable"/></div>',
            width: 40
        }, {
            field: 'firstName',
            displayName: 'First Name'
        }, {
            field: 'lastName',
            displayName: 'Last Name'
        }, {
            field: 'empNumber',
            displayName: 'Emp #'
        }]
    };

    // Watch for sorting option change
    $scope.$watch('gridOptions.sortInfo', function(newVal, oldVal) {
        if (newVal !== oldVal) {
            if (newVal.fields != oldVal.fields || newVal.directions != oldVal.directions) {
                if (!angular.isUndefined($scope.myData)) {
                    $scope.myData = sortData($scope.myData, newVal.fields[0], newVal.directions[0]);
                }
            }
        }
    }, true);

    // Sorting data by angular $filter   
    function sortData(filterData, fields, directions) {
        if (!angular.isUndefined(filterData)) {
            var orderBy = $filter('orderBy');
            filterData = orderBy(filterData, fields, directions == 'desc' ? true : false);
        } else filterData = [];
        return filterData;
    }

    $scope.isChecked = function(id) {
        if (id == $scope.selID) {
            return true;
        } else {
            return false;
        }
    }

    $scope.setSel = function(id) {
        $scope.selID = id;
    }

});

AngularJS ng-grid单选按钮问题

1 个答案: