15

背景情報を簡単に紹介します。Angular 1.4 にアップグレードしました。サーバー側の呼び出しに C# で記述された API を使用しています。

マイページのセクションに 2 つの選択リスト (プロジェクトとサブプロジェクト) が表示されます。どちらもデフォルトで「(Select a ______)」になるはずです。これは、「値」が 0 の各選択の最初のオプションとしてリストされています。適切な ng-model 変数は 0 に初期化されます。

選択リストの実際の HTML コードは、文字列連結を使用してサーバー側で生成され、$http を介してクライアントに渡され、$compile を呼び出すディレクティブを使用して挿入されます (まったく理想的ではありませんが、私のクライアントは私をかなり連鎖させています)。この API に)。1.4 アップデートの前は、すべてがうまく機能していました。

現在、私のプロジェクト選択リストはデフォルトで何も設定されていません。要素を調べると、これが表示されます...

<select ng-change="updateSubProjList()" ng-model="curProjID">
    <option value="? number:0 ?"></option>
    <option value="0">(Select a Project)</option>
    <option value="1">First Project</option>
    <option value="2">Second Project</option>
    ...
</select>

...その最初の "? number:0 ?" で エントリは現在選択されているものです。私のサブプロジェクトの選択リストはまだうまく初期化されているため、これはさらに奇妙になります。

AngularJS 1.4 への更新で $compile にいくつかの更新があったことは知っていますが、問題の解決策がわかりません。どんな援助でも大歓迎です。

4

4 に答える 4

24

1.4 では、属性をngModel比較して選択したオプションを照合する方法に関連する変更があるようです。現在では、整数を許可するのではなく、照合する文字列を明示的に使用する必要があります。value<option value="0">

実際、ドキュメントには次のように明確に記載されています。

selectなしで使用されるディレクティブの値は、ngOptions常に文字列です。モデルを文字列以外の値にバインドする必要がある場合は、ディレクティブ ... を使用して明示的に変換するかngOptions、オプションのセットを指定するために使用する必要があります。

修正するには、 の初期化$scope.curProjIDされた値を文字列に変更します。

$scope.curProjID = "0"; // $scope.curProjID = 0 の代わりに;

一致するものがない場合 (そして、 string を割り当てない限り一致しない場合"0")、select「不明な」オプションを追加します<option value="? number:0 ?"></option>。

于 2015-06-02T19:56:20.413 に答える
5

別の方法があります。パーサーとフォーマッターを実装するディレクティブを使用します。http://plnkr.co/edit/JZPay8jgm5AXKGXDCjSbを参照

ナレッツに感謝！

擬似コード:

<select convert-number ng-model="x">
   <option value="100">100</option>
   <option value="200">200</option>
</select>


app.directive('convertNumber', function() {
  return {
    require: 'ngModel',
    link: function(scope, el, attr, ctrl) {
      ctrl.$parsers.push(function(value) {
        return parseInt(value, 10);
      });

      ctrl.$formatters.push(function(value) {
        return value.toString();
      });      
    }
  }
});
于 2015-06-09T12:04:50.010 に答える
2

同じ問題がありました。私の JavaScript コードがあらゆる場所で文字列を使用していることを確認する代わりに、次のことを行いました。

<option ...>HTML ファイルから項目を削除しました

次のようなリストを JavaScript に導入しました。

var orderQuantities = [
        { id: 100, text: '100' },
        { id: 200, text: '200' },
        { id: 300, text: '300' },
];

orderQuantities がスコープに表示されていることを確認しました

次のようにタグで使用ng-optionさselectれます。

<select ng-model="vm.entity.OrderQuantity" ng-options="orderQuantity.id as orderQuantity.text for orderQuantity in vm.orderQuantities"></select>
于 2015-06-08T16:49:15.330 に答える
0 
<select ng-model="x">
   <option value="100">100</option>
   <option value="200">200</option>
</select>

scope.x = '200'

またはこのドキュメントを読んでください。 https://docs.angularjs.org/guide/migration

于 2016-07-28T14:48:29.630 に答える