web-dev-qa-db-fra.com

Modèle de cellule conditionnel dans les angularjs de la grille ui

Comment ajouter des conditions lors de l'affichage de données dans ui-grid cellTemplate ci-dessous:

$scope.status = ['Active', 'Non Active', 'Deleted'];
$scope.gridOptions = {
    columnDefs: [{
        field: 'code'
    }, {
        field: 'name'
    }, {
        field: 'status',
        cellTemplate: '<div>{{status[row.entity.status]}}</div>'
    }]
};

Le résultat attendu doit être l'état de la ligne show Active/NonActive/Deleted.

Voici le plunker

Merci d'avance.

angularjsangular-ui-grid
15
Hendra

Vous devez utiliser externalScopes.

Dans votre balisage, définissez le détenteur de la grille comme ceci.

<div ui-grid="gridOptions" external-scopes="states" class="grid"></div>

Et dans votre contrôleur utilisez ce code:

var statusTxt = ['Active', 'Non Active', 'Deleted'];

$scope.states = {
  showMe: function(val) {
    return statusTxt[val];
  }
};

var statusTemplate = '<div>{{getExternalScopes().showMe(row.entity.status)}}</div>';
$scope.gridOptions = {
  columnDefs: [{
    field: 'code'
  }, {
    field: 'name'
  }, {
    field: 'status',
    cellTemplate: statusTemplate
  }]
};

Ou utilisez un filtre angulaire.

Notez que ceci ne rend que rend le texte. La meilleure approche serait de transformer myData pour avoir des états de texte réels avant de l’utiliser dans ui-grid. Juste au cas où vous souhaiteriez effectuer ultérieurement un filtrage textuel.

Voici un Plunker

28
mainguy

Je suggérerais d'utiliser ng-if pour résoudre ce problème.

$scope.gridOptions = {
    columnDefs: [{
        field: 'code'
    }, {
        field: 'name'
    }, {
        field: 'status',
        cellTemplate: '<div ng-if="row.entity.status == 0">Active</div><div ng-if="row.entity.status == 1">Non Active</div>'
    }]
};
18
Yang Zhang

J'ai une autre solution pour vous sans utiliser d'étendues externes:

Le modèle ressemble à ceci:

var statusTemplate = '<div>{{COL_FIELD == 0 ? "Active" : (COL_FIELD == 1 ? "Non Active" : "Deleted")}}</div>';

Voici le plunker:

http://plnkr.co/edit/OZtU7GrOskdqwHW5FIVz?p=preview

13
nabinca

Utilisez une cellFilter.

columnDefs: [{
    field: 'code'
}, {
    field: 'name'
}, {
    field: 'status',
    cellFilter: 'mapStatus'
}]


app.filter('mapStatus', function() {

    var statusMap = ['Active', 'Non Active', 'Deleted'];

    return function(code) {
        if (!angular.isDefined(code) || code < 0 || code > 2) {
            return '';
        } else {
            return statusMap[code];
        }
    };
});

plunker

10
Tom

Vous devez changer votre modèle. Lorsque vous faites référence à des portées externes dans angular-ui-grid, vous pouvez utiliser grid.appScope.

var statusTemplate = '<div>{{grid.appScope.status[row.entity.status]}}</div>';
3
Alfredo Morales

Essayez ci-dessous script. Ça marche pour moi.

  app.controller('MainCtrl', ['$scope',
  function($scope) {

  var statusTxt = ['Active', 'Non Active', 'Deleted'];

$scope.showMe= function(val) {
    return statusTxt[val];
  };

var statusTemplate = '<div>{{grid.appScope.showMe(row.entity.status)}}</div>';
$scope.gridOptions = {
  columnDefs: [{
    field: 'code'
  }, {
    field: 'name'
  }, {
    field: 'status',
    cellTemplate: statusTemplate
  }]
};

$scope.gridOptions.data = [{
  "code": "Cox",
  "name": "Carney",
  "status": 0
}, {
  "code": "Lorraine",
  "name": "Wise",
  "status": 1
}, {
  "code": "Nancy",
  "name": "Waters",
  "status": 2
  }];
  }
]);
0
Shriya