9

かなり単純なドロップダウンに angular-ui の select2 を使用しています。これは、コントローラーのスコープにあるデータの静的配列によって支えられています。私のコントローラーには、値が変更されたときにいくつかのアクションを実行できるように、ドロップダウンの ng-change で呼び出される関数があります。

ただし、私が見つけたのは、ng-model のプロパティが実際の JavaScript オブジェクトではなく JSON 文字列として設定されるため、ドット表記を使用してそのモデルからプロパティを取得することが不可能になることです。

変更されたドロップダウンの値を処理する関数は次のとおりです。

$scope.roleTypeChanged = function() {
  //fine:
  console.log('selectedType is: ', $scope.adminModel.selectedType);

  // this ends up being undefined because $scope.adminModel.selectedType is a 
  // JSON string, rather than a js object:
  console.log('selectedType.typeCode is: ', $scope.adminModel.selectedType.typeCode);
}

これが私の完全な例のプランカーです: http://plnkr.co/edit/G39iZC4f7QH05VctY8zG

ng-model にバインドされたプロパティがこれを行うのを見たことはありませんが、Angular にもかなり慣れていないため、ここで何か間違ったことをしている可能性があります。$.parseJSON() のようなことを実行して JSON 文字列をオブジェクトに戻すことは確かにできますが、必要がない限りはそうしたくありません。助けてくれてありがとう！

4

2 に答える 2

2

ありがとうカール！私はこれで一日苦労しました

私と同様の問題を抱えている他の人へのメモとして、コントローラー/ディレクティブでアクセスできず、定義されていない ng-model を使用する場合、このように解決しました。

//country.Model には Code ノードと Name ノードがあります

* HTML *

 <select 
name="country" data-ng-model="country.Model"  
    data-ui-select2=""  
    data-ng-change="countryChanged(country.Model)"  <!--only for test, log to console-->
    data-ng-options="country as CodeAndName(country) for country in countries"
    data-placeholder="{{placeholderText(country.Model, '- - Select Country - -')}}" >
    <option value=""></option>
</select>

* JS *

 function controller($scope, $q, $location, $routeParams) {

    $scope.countryChanged = function(item) { // for test                
      console.log('selectedType is: ', item);
    };

    //returns the item or the text if no item is selected
    $scope.placeholderText = function (item, text){ 
        if (item == undefined)
            return text;
        return $scope.CodeAndName(item);
    };

    // returns a string for code and name of the item, used to set the placeholder text
    $scope.CodeAndName = function (item) { 
        if (item == undefined)
            return '';
        return item.Code + ' - ' + item.Name;
    };
于 2014-03-06T15:38:32.027 に答える