1

カスタム ディレクティブ内に配置されている選択要素の値を設定および取得する方法を見つけるのを手伝ってくれませんか。

これは私が持っているものです:

 <body ng-app="myApp">
    <div ng-controller="MyCtrl">
      <div ng-repeat="category in categories">
        {{category.Name}}: 
        <status-selector items="statuses" ng-model="selectedStates[status.Id]"></status-selector>
      </div>
    </div>
  </body>

カテゴリとステータスの 2 つの配列があります。各カテゴリには、独自のステータスがあります。カテゴリのステータスが選択されたら、selectedStatus に保存して、最終的に のようなものにする必要があります[{CategoryId:1,StatusId:2},{CategoryId:2,StatusId:3}]。selectedStatus が既に初期化されている場合、対応するカテゴリの選択されたステータスを確認したい場合は、値を読み取るだけでなく、値も入力する必要があることを意味します。

myApp
.controller("MyCtrl", function($scope) {
    $scope.categories = [{Id:1, Name: "Category1"}, {Id: 2, Name: "Category2"}];
    $scope.statuses = [{Id: 1, Name: "Low"}, {Id: 2, Name: "Normal"}, {Id: 3, Name: "High"}]
    $scope.selectedStates = {};
})
.directive('statusSelector', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: { items: '=', ngModel: '='},
        template: '<span><select class="select" ng-options="obj.Id as obj.Name for obj in items" ng-model="ngModel"></select></span>',
        link: function(scope, element, attrs) {
        }
    }
});

ありがとうございました。

デモ:フィドル

4

1 に答える 1

3

として独自のカテゴリ モデルを用意する必要がありますng-model。それはおそらくもっと理にかなっています。

<status-selector items="statuses" ng-model="category.Status"></status-selector>

ステータスを設定するStatusには、JSON に入力するだけです。

// ...
.controller("MyCtrl", function($scope) {
  $scope.categories = [{Id:1, Name: "Category1", Status: 1}, {Id: 2, Name: "Category2"}];
// ...

明らかに、ユーザーの選択を取得するには、category.Statusプロパティを取得するだけです。これが更新された fiddleです。

また、サイドチップのみ。あなたはパスカルのケースに慣れている.Netのバックグラウンドから来ているようです。JavaScript では、代わりにキャメル ケースを使用するのが常識なので、{id: ..., status: ...}代わりに{Id: ..., Status: ...}.

于 2013-03-23T12:40:57.193 に答える