將數據庫的默認選項加載到所選選項中

Question

我有一個函數可以加載一個簡單的選擇，如：

function cargarCatalogo() {
            apiService.get("../../api/Catalogo/GetCatalogoPadre/" + $scope.Catalogo + "/",
                null,
                function(res) {
                    $scope.Catalogos = res.data;
                    $scope.selected = $scope.Catalogos[0];
                   inicial
                    $scope.filtro($scope.selected);
                },
                errorCatalogo);
        }

如您所見，我使用$scope.selected = $scope.Catalogos[0];選擇第一個選項作為默認選項$scope.selected = $scope.Catalogos[0]; 問題是我不希望該選項被選中，因為我使用的是“編輯視圖”，所以我想選擇數據庫的值。

我的桌子是這樣的：

+--------+----------+---------+
|     ID |  Nombre  | PadreID |
+--------+----------+---------+
|      1 | KENWORTH |       0 |
|      2 | VOLVO    |       0 |
|      3 | T6000    |       2 |
|      4 | T800     |       1 |
+--------+----------+---------+

如果我編輯寄存器T6000，我將在選擇中收到KENWORTH和VOLVO ，但是PadreID等於2，所以我希望默認選項為2？ 我需要更改為選定值嗎？ 問候

HTML：

<select class="form-control" ng-hide="Catalogos.length==0" ng-change="filtro(selected)" ng-model="selected" ng-options="item.Nombre for item in Catalogos "></select>

$scope.selected = $scope.Catalogos[0]; 結果：

Answer 1

如果您具有所需選擇項的ID，則可以將ng-options="item.Codigo as item.Nombre for item in Catalogos "> select ng-options="item.Codigo as item.Nombre for item in Catalogos ">的ng-model將保留Codigo並且用戶視圖將顯示Nombre

您可以嘗試這個<select class="form-control" ng-hide="Catalogos.length==0" ng-change="filtro(selected)" ng-model="selected.Codigo" ng-options="item.Codigo as item.Nombre for item in Catalogos"></select>

Answer 2

我個人覺得語法ng-options難以閱讀和理解，我一直首選將ng-repeat與ng-bind ， ng-value和ng-selected以達到類似的結果。 您可以使用替代方法來完成此操作：

<select class="form-control" ng-hide="Catalogos.length==0" ng-change="filtro(selected)" ng-model="selected">
        <option ng-repeat="item in Catalogos" ng-bind="item.Nombre" ng-value="item.Codigo" ng-selected="item.ID === object.ID"></option>
</select>

我不確定您要如何設置選擇哪個選項，但是要使用ng-selected ，當與另一個值比較時，需要當前item中的任何屬性才能將其評估為true。

ngSelected文檔： https ://docs.angularjs.org/api/ng/directive/ngSelected