angular js ui-select选项重复不适用于对象数组

时间:2017-07-20 13:27:30

标签: javascript angularjs ui-select

我正在使用Angular ui-select。我的模特& ui-select选项数组是不同的。在更改值时,它未更新且未显示选项。我将选定的对象Id存储在" pmpo"中,我想在加载时从pmptnk对象数组中显示所选对象。但是没有用。有人说出我做错了什么。

我的模型

中的对象
  pmpo:877
  pmptnk:[0:
    632:{id: "632",  pid: "2993", ESID: "9154", lb1: "Undddd", lb2: "219"}
    877:{id: "877",  pid: "2993", ESID: "9154", lb1: "Pcddd", lb2: "29"}
    654:{id: "654",  pid: "2993", ESID: "9154", lb1: "kukuu", lb2: "246"}]

在视图文件

 <div ng-if="item.pmptnk.length > 0">
    <ui-select ng-model="item.pmpo" click-out-side="closeThis($event)">
    <ui-select-match placeholder="Select " search-placeholder="Filter Tanks" 
    uib-tooltip="{{item.pmpo > 0 ? $select.selected.lb1 : 'Select Tank'}}" tab-select="true">
         <span ng-bind="$select.selected.lb1"></span>
    </ui-select-match>
    <ui-select-choices repeat="obj.tid as obj in (item.pmptnk[item.pmpo])">
        <span ng-bind="obj.lb1"></span>
    </ui-select-choices>
    <ui-select-no-choice>
      No results matched "{{$select.search}}"
    </ui-select-no-choice>
    </ui-select>

</div>

3 个答案:

答案 0 :(得分:1)

根据docs of ui-select-choicesrepeat属性

  

指定要作为选项提供的项目列表。语法类似   到ngRepeat

根据ng-repeat doc

  

可以让ngRepeat迭代一个属性   使用以下语法对象:

<div ng-repeat="(key, value) in myObj"> ... </div>

因此,从此我们可以得出结论,您应该更改语法

<ui-select-choices repeat="obj.tid as obj in (item.pmptnk[item.pmpo])">

到此

<ui-select-choices repeat="(key, value) in (item.pmptnk[item.pmpo])">

其中value8772993等等,keyidpid等等。

答案 1 :(得分:0)

我处理了你的代码。我以不同的方式尝试了它。 以下是我的代码段:

<div ng-if="item.pmptnk.length > 0">
        <ui-select ng-model="item.selected" click-out-side="closeThis($event)">
           <ui-select-match placeholder="Select " search-placeholder="Filter Tanks" uib-tooltip="{{item.pmpo > 0 ? $select.selected.lb1 : 'Select Tank'}}" tab-select="true">
              <span ng-bind="$select.selected.lb1"></span>
           </ui-select-match>
           <ui-select-choices repeat="obj.tid as obj in (item.pmptnk)">
              <span ng-bind="obj.lb1"></span>
           </ui-select-choices>
       <ui-select-no-choice>
            No results matched "{{$select.search}}"
       </ui-select-no-choice>
   </ui-select>

我改变了我的模型如下:

$scope.item = {};
    $scope.item.pmpo=877;
    $scope.item.pmptnk=[
    {id: "632",  pid: "2993", ESID: "9154", lb1: "Undddd", lb2: "219"},
    {id: "877",  pid: "2993", ESID: "9154", lb1: "Pcddd", lb2: "29"},
    { id: "654", pid: "2993", ESID: "9154", lb1: "kukuu", lb2: "246" }];
    for (var i = 0 ; i < $scope.item.pmptnk.length; i++) {
        if ($scope.item.pmptnk[i].id == $scope.item.pmpo) {
            $scope.item.selected = $scope.item.pmptnk[i].tid;
            break;
        }
    }

这对我来说很好。

答案 2 :(得分:-1)

不应该是ng-repeat而不是重复吗?

 <ui-select-choices repeat="obj.tid as obj in (item.pmptnk[item.pmpo])">

将此行更改为以下

<ui-select-choices ng-repeat="obj.tid as obj in (item.pmptnk[item.pmpo])">

希望能解决这个问题。