ui ग्रिड में सशर्त सेल टेम्पलेट

Question

सशर्त कैसे जोड़ने के लिए जब नीचे ui-grid cellTemplate में डेटा दिखाने AngularJS:

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

अपेक्षित परिणाम पंक्ति स्थिति शो Active/NonActive/Deleted होना चाहिए।

यहाँ plunker

अग्रिम धन्यवाद है।

Answer 1

आपको externalScopes का उपयोग करना होगा।

अपने मार्कअप में इस तरह ग्रिडहोल्डर को परिभाषित करें।

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

और अपने नियंत्रक उपयोग इस कोड में:

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 
    }] 
}; 

या एक कोणीय फिल्टर का उपयोग करें।

ध्यान दें कि यह केवल पाठ प्रस्तुत करता है। Ui-grid में इसका उपयोग करने से पहले वास्तविक टेक्स्ट स्टेटस रखने के लिए myData को बदलने का सबसे अच्छा तरीका होगा। बस अगर आप बाद में कुछ पाठ आधारित फ़िल्टरिंग करना चाहते हैं।

खाका इस तरह दिखता है:

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

यहाँ plunker है:

यहाँ एक Plunker

Answer 2

मैं बाहरी कार्यक्षेत्रों का उपयोग किए बिना आप के लिए एक और समाधान मिल गया है है http://plnkr.co/edit/OZtU7GrOskdqwHW5FIVz?p=preview

Answer 3

हमें ई 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

Answer 4

मैं ng-if उपयोग करने के लिए इस समस्या को हल सुझाव है।

$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>' 
    }] 
}; 

Answer 5

आपको अपना टेम्पलेट बदलना होगा। जब आप कोणीय-यूई-ग्रिड में बाहरी क्षेत्रों का जिक्र कर रहे हैं तो आप grid.appScope का उपयोग कर सकते हैं।

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

Answer 6

स्क्रिप्ट के नीचे आज़माएं। यह मेरे लिए काम कर रहा है।

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 
    }]; 
    } 
]); 

अब तक