API 呼び出しからのデータを含む ng-repeat を含む Select2 のデフォルト値

Question

次のような角度の select2 があります。

<select ui-select2 id="clientID" name="clientID" ng-model="newTicket.clientstate" ng-required="true">
    <option ng-repeat="item in clients track by item.id" value="{{item.clientID}}|{{item.stateID}}" >{{item.displayName}}</option> 
</select>

私のコントローラーでは、クライアントは次のように設定されています（$resourceから$promiseを返すサービスを呼び出します）。

TicketService.getClients().then(
    function(clients) {
        $scope.clients = clients;
    }
);

また、コントローラーに $scope.newTicket.clientstate の初期値を設定します。$resource への呼び出しは非同期であるため、クエリが解決される前に初期値の設定が行われます。

API 呼び出しが完了した後、ドロップダウンに初期値 (「DEMO|DEMO」) を入力しようとしています。解決策は次の 3 つのうちのいずれかだと思います。select で ng-init を設定するか、ng-repeat で ng-selected を設定するか、API がクエリを返した後に発生する .then() で何かを行います。しかし、正しい構文を機能させることができないようで、どのように進めるかについてアドバイスが得られることを期待していました。

問題を解決するための私の最初の取り組みは (以下のコメントでわかります)、すべてを ng-options に変換することでしたが、ui-select2 ライブラリは ng-options と互換性がないため、別の可能性を探しています。

Answer 1

私も同じようなことに遭遇したところ、職場の男が私に正しい方向を教えてくれました。

あなたも私も、解決策を過度に複雑にしようとしていたことがわかりました。あなたがしなければならないことは次のとおりです。

TicketService.getClients().then(
    function(clients) {
        $scope.clients = clients;
        // set the default value after the list comes back
        $scope.newTicket.clientstate = 'yourDefaultValue';  
    }
);

それなら大丈夫です！

初期化が完了していることを確認してください $scope.newTicket これより前に実行しないと、未定義のオブジェクトのプロパティにアクセスできないというエラーが表示されます。

そして私はそれを仮定しています getClients() を返します $promise 物体？それ以外の場合は、次のいずれかを行う必要があります。

TicketService.getClients(function(clients){...}))

または：

TicketService.getClients().$promise.then(function(clients){...}))