4

ページに JavaScript 配列にバインドされた KendoUI グリッドがあります。グリッド内の行をクリックすると、行変更イベントが発生し、その行を表すオブジェクトを取得します。私は今、AngularJS のテンプレートを使用して、このようにそのモデルにバインドしたいと考えています...

<div ng-app ng-model="currentRecord">
  {{FirstName}} - {{Surname}}
</div>

FirstName と Surname はどちらも、行のオブジェクトのプロパティです。だから私が求めているのは、AngularJsコントローラーの外部からモデルを設定する方法だと思いますか?

私は Angular を取り上げたばかりなので、私が尋ねていることは悪い考えかもしれません。その場合は、その理由を教えてください。

アップデート

ピーターの答えに従って、「Angular Kendo」でこれを達成しようとしました

MVC ヘルパーを使用してグリッドをレンダリングしています。コードは次のようになります。

<div ng-app="ngUsers">
    <div ng-controller="UserCtrl">
        <div class="span6">
            @(Html.Kendo().Grid(Model)
                  .Name("Grid")

                  .Columns(columns =>
                      {
                          columns.Bound(p => p.Id).Hidden(true);
                          columns.Bound(p => p.FirstName);
                          columns.Bound(p => p.LastName);
                      })
                  .Groupable()
                  .Pageable()
                  .Sortable()
                  .Scrollable()
                  .Filterable()
                  .Selectable()
                  .Events(e => e.Change("rowSelected"))
                  .DataSource(dataSource => dataSource
                                                .Ajax()
                                                .Read(read => read.Action("AjaxList", "User"))
                  )
                  )
        </div>

        <div id="results">
            {{FirstName}}   
        </div>

    </div>
</div>

私が欲しいのは、行が選択されたときに、そのオブジェクトの firstname プロパティが結果の div に表示されることです。

私のAngularコントローラーは次のようになります....

var ngUsers = angular.module('ngUsers', ["kendo.directives"]);

ngUsers.controller("UserCtrl", function ($scope) {
    $scope.rowSelected = function (kendoEvent) {
        var grid = kendoEvent.sender;
        var selectedRow = grid.select();
        $scope.user = selectedRow;
    }; 
});

これにより、グリッド変更イベントをバインドする行でrowSelectedが定義されていません。これは、グリッドが角度コントローラーでrowSelectedイベントを認識できないためだと思いますか?

4

2 に答える 2

2

Angular Kendoを見たことがありますか？The data source exampleを見てください。div に属性を追加する必要があります。

on-change="rowSelected(kendoEvent)"

次に、コントローラーで関数を定義する必要があります。

$scope.rowSelected = function(kendoEvent) {
   var grid = kendoEvent.sender;
   var selectedRows = grid.select();
   ...
}

コントローラーを定義して HTML で使用する方法がわからない場合は、このクイック ビデオをご覧ください。

于 2013-06-18T12:20:14.933 に答える
1

いくつかの変更を加える必要があります。通常 ng-model は入力で使用されますが、あなたのケースでは、角度のある世界と角度のない世界をリンクするためのマーカーとして使用できます。

<div ng-app="plunker" ng-model="currentRecord" ng-show="currentRecord">
  {{currentRecord.FirstName}} - {{currentRecord.Surname}}
</div>

ng-model は現在のスコープの JavaScript オブジェクトにのみバインドするため、そこからプロパティにアクセスする必要がある場合は、直接参照する必要があります。

外部（Angular ではない）ソースからのモデルの更新

function myExternalFunction() {
    //external code
    // we need to get the element and wrap it in an angular element
    var $element = angular.element('[ng-model="currentRecord"]');
    var scope = $element.scope();
    //the ngModel controller will have the correct apis
    var ngModelController = $element.controller('ngModel');

    //the external data
    var model = {'FirstName' : 'John', 'Surname': 'Smith'};

    //$apply to notify angular that the models have changed from outside
    scope.$apply(function() {
      //$viewValue is only useful for inputs not divs.
      ngModelController.$viewValue = model;
      //this will actually set the value on the scope
      ngModelController.$setViewValue(model);
    });
}

デモ

于 2013-06-18T12:19:45.870 に答える