web-dev-qa-db-ja.com

ng-modelはui-selectで変更されません

私は非常に簡単なことを達成しようとしています：

<ui-select multiple ng-model="company.stack" theme="bootstrap">
    <ui-select-match>{$$item.name$}</ui-select-match>
    <ui-select-choices repeat="technology in technologies | filter: $select.search">
        <div ng-bind-html="technology.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

オブジェクトを変更する場合、変更はモデルcompany.stackに反映されません。 $ parent.company.stackに変更しようとしましたが、それでも機能しません。何が足りないのですか？ AngularJSv1.3.0-beta.17を使用しています。

angularjsangular-uiui-select2
16
TeknasVaruas

angular 1.3.14とui-select、および配列への複数選択のui-selectディレクティブバインディングで同様の問題が発生しました。選択したアイテムをng-modelで参照されている配列にバインドできませんでした。 selectedItemsをオブジェクトにラップすることで機能するようになりました。

$scope.myObj = { selectedItems : []};
...

<ui-select ng-model="myObj.selectedItems" ...>
</ui-select>

selectedItemsを$scopeに直接配置してもうまくいきませんでした。

34
AunAun

これをすでに理解しているかどうかはわかりませんが、AngularJSやその他すべてのユーザーにとって初めての、この「基本的なユースケース」にも苦労していました。 Angular 1.2.16およびui-select0.8.3を使用していますが、他のすべては機能していましたが、スコープ変数employee.selectedを更新することができませんでした。

私の場合、この問題はAngularJSの経験が限られていることが原因でした。 ng-modelはオブジェクト（私の場合は従業員）のプロパティに設定されているため、最初に初期化する必要がありました。コントローラに$scope.employee = {};を追加すると、これが解決されました。

4
Rado

@Radoが述べたように空のオブジェクトを初期化すると、この構造で修正されました。

              <ui-select ng-model="reportFilterStatus.selected" title="Filtrar status">
                <ui-select-match placeholder="Filtra un estatus">
                    {{$select.selected}}
                </ui-select-match>
                <ui-select-choices repeat="status in filterStatusOptions | filter: $select.search">
                  <small ng-bind-html="status | highlight: $select.search"></small>
                  <span ng-bind-html="statuse | highlight: $select.search"></span>
                </ui-select-choices>
              </ui-select>
1
Reedyseth

私にとっては、テキストを更新していなかったので、次のように使用しました。

$timeout(function () {
    $('#ownerdetail').trigger("create");
    $('#ownerdetail').delay(0).animate({opacity: 1}, 100);
    $('#selectdcontact').selectmenu().selectmenu('refresh'); //This solves it
    $('#selectdcust').selectmenu().selectmenu('refresh'); //This solves it
  });
0
Bogdan Trusca

私も同様の問題を抱えています。現時点でangular-ui-select＃0.7が正しく機能するには、angular＃1.2。*が必要なようです。

0
scorpiox

Angular 1.2.16およびui-select0.8.3）の非常に基本的なユースケースでも苦労しています。コードにタイプミスがあるようですが、- i-select-match。

通常、その属性は{{$select.selected.your_property_here}}のように見えるため、ある種の標準プロパティ名$select.selectedの場合、二重中括弧と1つのドル記号が使用されます。これがあなたの問題でしょうか？

0
superjos

ここの何人かの人々は問題に触れました、しかし私はそれを明らかにします。何らかの理由で、ui-selectでは、ng-modelが$ scope内のネストされた値である必要があります。したがって、ng-modelは、xまたはyではなく、スコープ内のx.yを指す必要があります。

0
shahar taite

私はangularjs1.4でも同様の問題を抱えています。 1つのコントローラーでng-model値が更新されます。しかし、他のページで同じ方法を使用すると、機能しません。以下は私のコードです

ワーキング：

 var ctrl = this; 
 
 ctrl.filters = {}; 
 
 ctrl.filters.country = $ rootScope.lUPro.RM_Country.split（ "、"）; 
 
 $（ "。country_select2"）。select2（）。val（ctrl.filters.country）.trigger（ 'change'）;

選択ボックスは

 $ comint-> CountrySelectBox（array（ "name" => "country []"、 "class" => "country_select2 form-control"、 "id" => "req_country"、 "ng-model" => "ctrl.filters.country"、 "multiple" => "multiple"））;

動作しない：

 var prectrl = this; 
 
 prectrl.preferenceformdata = {}; 
 
 var pf = {}; 
 
 pf.country = $ rootScope.lUPro.RM_Country.split（ "、"）; 
 
 prectrl.preferenceformdata = pf; 
 $（ "。rm_country_select2"）。 select2（）。val（prectrl.preferenceformdata.country）.trigger（ 'change'）;

選択ボックス：

 
 $ comint-> CountrySelectBox（array（ "name" => "country []"、 "class" => "country_select2 form-control"、 "id" => "req_country"、 "ng-model" => "prectrl.preferenceformdata.country"、 "multiple" => "multiple"））;

したがって、ng-model変数の値を更新するために使用している回避策は次のとおりです。

 $（ "。country_select2"）。select2（）。val（prectrl.preferenceformdata.country）
 
。trigger（ 'change'）。on（ "change"、
 
 function（e）{
 
 var values = $（this）.val（）; 
 
 $ scope。$ apply（function（）{prectrl.preferenceformdata.country = values;}）; 
 
}）;
0
mohit

そのモデルにng-initを置くことでこれを解決しましたafter</ui-select>次のdivで。
例：

<div class="col-md-6" ng-init="company-stack=null">
0
resakse