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

Question

我正在使用 Angular ui-select。我的模型和 ui-select 选项数组不同。在更改值时，它不会更新并且不会显示选项。我将 selected 对象 Id 存储在 "pmpo" 中，我想在加载时显示 pmptnk 对象数组中的 selected 对象。但是没有用。有人说我做错了什么。

我的模型对象

  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>

Answer 1

不应该是ng-repeat而不是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])">

它有望解决问题。

Answer 2

根据 docs of ui-select-choices，repeat 属性

Specify the list of items to provide as choices. Syntax is similar to ngRepeat.

并根据 ng-repeat doc

It is possible to get ngRepeat to iterate over the properties of an object using the following syntax:
<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])">

其中 value 将是 877、2993 等等，key 将是 id、pid 等等。

Answer 3

我研究过你的 code.I 以不同的方式尝试过。下面是我的代码片段：

<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>
</div>

我更改了我的模型如下：

$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;
  }
}

这对我来说很好。

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

angular js ui-select option repeat not working for object array

javascript

angularjs

ui-select