爲什麼我不能在cellTemplate中綁定輸入類型「複選框」？

這是我plunker例如：http://plnkr.co/edit/Tc9FRHAEoQlOqy7sk1Ae?p=preview 爲什麼我不能在cellTemplate中綁定輸入類型「複選框」？

我想要做的事：用cellTemplate 綁定的複選框HTML從我的數據的單元格field04，仍然可以訪問它的NG-點擊功能。

代碼在app.js：從index.html的

var app = angular.module('app', ['ui.grid', 'ngSanitize']); 

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

$scope.myViewModel = { 
    someProp:'abc', 
    showMe : function(){ 
    alert(this.someProp); 
    } 
}; 

$scope.gridOptions = { 
}; 

$scope.gridOptions.columnDefs = [ 
    { name: 'field01', field: 'field01' }, 
    { name: 'field02', field: 'field02'}, 
    { name: 'field03', field: 'field03', cellTemplate: '<input type="checkbox" ng-model="row.entity.field03" ng-click="$event.stopPropagation();getExternalScopes().showMe()">'}, 
    { name: 'field04', field: 'field04', cellTemplate: 'viewTemplate2'}, 
    { name: 'field05', field: 'field05', cellTemplate: 'viewTemplate2'} 
    ]; 

$scope.gridOptions.data = [ 
    { 
     "field01": "one", 
     "field02": "01", 
     "field03": false, 
     "field04": '', 
     "field05": '', 
    }, 
    { 
     "field01": "two", 
     "field02": "02", 
     "field03": false, 
     "field04": '', 
     "field05": '', 
    }, 
    { 
     "field01": "three", 
     "field02": "03", 
     "field03": false, 
     "field04": '<input type="checkbox" ng-model="row.entity.field03" ng-click="$event.stopPropagation();getExternalScopes().showMe()">', 
     "field05": '<div><a href="#" title="icon link"><img class="icon" alt=""/></a></div>', 
    } 
]; 
$scope.toggle = function() { 
    alert("toggled"); 
} 
}]);

代碼：

<body> 

<div ng-controller="MainCtrl"> 
    <div ui-grid="gridOptions" external-scopes="myViewModel" class="grid"></div> 
</div> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-sanitize.min.js"></script> 
<script src="app.js"></script> 
<script type="text/ng-template" id="viewTemplate2"> 
    <span ng-bind-html="row.entity[col.field]"></span> 
</script> 

</body>

如果我寫的columnDef的HTML我實現field03正確的效果。感謝TomMorgan的闖入者：http://plnkr.co/edit/9eRg9Yjl2ooeSuWMJ8x2?p=preview。

我可以用field05中的數據填充cellTemplate。

爲什麼它不適用於field04中的複選框？

我是angularjs的新手，很難從「ng-grid」解決方案中分離出「ui-grid」解決方案。我很感激幫助。

來源

2014-12-18 amadis77

有沒有你不能把你想要的一個理由columnDefs中cellTemplate中的HTML？是否因爲你想要的HTML會作爲你的數據進入？你爲field03實現它的方式將是正確的做法。使用ui-grid（即ng-grid 3.0）時，您希望將自定義HTML放在cellTemplate中。 – nairys 2014-12-19 02:01:54

當數據進來時，我必須以某種方式過濾它。例如，field03是「權限」，如果「權限」：「canEdit」爲真，我需要顯示一個編輯圖標。此外，該行項目可能有一個鏈接到它的文檔，如果需要的話，我需要在field03中的「canEdit」圖標旁邊顯示一個文檔鏈接圖標。在「ui-grid」中我無法弄清楚如何在數據加載到網格中時運行這樣的腳本。我可以在jqgrid中使用 afterInsertRow：function（rowid，data）{} – amadis77 2014-12-19 19:29:40

您可以使用角度構建自定義過濾器來處理該邏輯。然後你可以調用該列的過濾器，如下所示：'{name：'field04'，field：'field04'，cellFilter：'myNewFilter'}' – nairys 2014-12-19 19:46:07

我不知道我是否瞭解您的代碼。

您不應該在您的數據中放入html代碼。所以，我把它改爲：

$scope.gridOptions.data = [ 
     { 
      "field01": "one", 
      "field02": "01", 
      "field03": false, 
      "field04": '', 
      "field05": '', 
     }, 
     { 
      "field01": "two", 
      "field02": "02", 
      "field03": false, 
      "field04": '', 
      "field05": '', 
     }, 
     { 
      "field01": "three", 
      "field02": "03", 
      "field03": false, 
      "field04": '', 
      "field05": '', 
     } 
    ];

下一頁：在你的模板傳遞給改變了值的參考：

{ name: 'field03', field: 'field03', cellTemplate: '<input type="checkbox" 
    ng-model="row.entity.field03" ng-click="$event.stopPropagation(); 
    getExternalScopes().showMe(row.entity.field03)">'}

注意功能現在有一個參數：

showMe(row.entity.field03)

在外部示波器中，您應該對參數做出反應：

$scope.myViewModel = { 
    someProp:'abc', 
    showMe : function(value){ 
    alert('toggled to: '+value); 
    } 
};

（你並不真的需要someProp）

的$scope.toggle()功能可以刪除，或者可以從被調用。

此外，我添加了一些調試幫助你的HTML向您展示的結合非常有效：

<div ng-controller="MainCtrl"> 
    <div ui-grid="gridOptions" external-scopes="myViewModel" class="grid"></div> 
    <hr> 
    {{gridOptions.data | json}} 
</div>

這裏是一個Plunker。那是你要的嗎？

更新：

這裏是另一個Plunker已在列中的複選框4.

來源

2014-12-19 17:49:14 mainguy

將html放入數據中是我做客戶端的一部分。當數據進來時，我檢查每個項目的「permissions」屬性。例如，如果「permissions」有「canEdit：true」，「hasDocument：true」在單個單元格中顯示這些相應的圖標文檔圖標需要有一個鏈接與它關聯到實際的文件在jqgrid我解決了這個通過使用「afterInsertRow」函數但在ui網格中，我不知道如何做同樣的事情，我應該發表一個關於這個問題的新問題嗎？如果我做得正確，我不會有複選框cellTemplate問題？ – amadis77 2014-12-19 19:40:47

這裏是一個Plunker與另外，AppScope，外部範圍不工作了。

我已經做了一些改變與新AppScope還能工作：

{ name: 'field03', field: 'field03', cellTemplate: '<input type="checkbox" 
    ng-model="row.entity.field03" ng-click="grid.appScope.showMe(row.entity.field03)">'}

在您應該對參數作出反應的範圍，但我從myViewModel拉，剛創建在$範圍功能：

$scope.showMe : function(value){ 
    alert('toggled to: '+value); 
};

您可以從版本15測試代碼與我的版本16.我的新版本運行正常，但沒有15。

來源

2015-06-05 16:57:06 Vasco

請在您的答案中包含相關的代碼位。 – kaz 2015-06-05 17:08:28

我從來沒有在這裏發佈。它花了一些時間來確定爲什麼我的代碼沒有得到答案。 – Vasco 2015-06-05 17:15:23

您需要使用$ sce來告訴ng-bind-html您綁定的HTML內容是安全的。

我已付出你的plunker併爲您的問題的解決方案是http://plnkr.co/edit/JyTaF8niJlf9Wpb775kb?p=preview

app.filter('unsafe', function ($sce) { 
     return $sce.trustAsHtml; 
    });

你必須使用此過濾器，NG-收口HTML

來源

2017-01-12 06:57:20 Gaurav

爲什麼我不能在cellTemplate中綁定輸入類型「複選框」？

回答

相關問題