web-dev-qa-db-ja.com

cellTemplateで入力タイプ「チェックボックス」をバインドできないのはなぜですか？

これが私のプランカーの例です：http://plnkr.co/edit/Tc9FRHAEoQlOqy7sk1Ae?p=preview

私がやろうとしていること：cellTemplateを使用して、データのfield04からセルにチェックボックスhtmlをバインドし、そのng-click関数にアクセスできます。 。

App.jsのコード：

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

Index.htmlからのコード：

<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にhtmlを入力できます。

Field04のチェックボックスで機能しないのはなぜですか？

私はangularjsを初めて使用し、「ui-grid」ソリューションを「ng-grid」ソリューションから分離するのは困難です。私は助けに感謝します。

angular-ui-grid
7
amadis77

あなたのコードを理解しているかどうかはわかりません。

データに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()に次のパラメータがあることに注意してください。

_showMe(row.entity.field03)
_

外部スコープでは、パラメータに反応する必要があります。

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

（実際にはsomePropは必要ありません）

$scope.toggle()関数は削除するか、showMe()から呼び出すことができます。

さらに、バインディングが非常にうまく機能することを示すために、HTMLにデバッグヘルプを追加しました。

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

これが プランカー です。それはあなたが望むものですか？

更新：

これは別の Plunker で、列4にチェックボックスがあります。

10
mainguy

これが Plunker であり、appScopeを使用すると、external-scopesは機能しなくなります。

新しいappScopeで動作するようにいくつかの変更を加えました。

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

スコープでは、パラメーターに反応する必要がありますが、myViewModelからプルして、$ scope内に関数を作成しました。

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

バージョン15のコードをバージョン16に対してテストできます。新しいバージョンは正常に実行されますが、15は実行されません。

3
Vasco

$ sceを使用して、バインドしているHTMLコンテンツが安全であることをng-bind-htmlに通知する必要があります。

私はあなたのプランカーをフォークしました、そしてあなたの質問の解決策は http://plnkr.co/edit/JyTaF8niJlf9Wpb775kb?p=preview

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

このフィルターはng-bind-htmlで使用する必要があります

0
Gaurav