帶有分層數據的選項未選擇

Question

我正在嘗試運行此示例，以從具有分層數據的選擇中選擇一個選項，但是它不起作用。

    $scope.options = [
      { id: 1, info: { label: "Item 1" } },
      { id: 2, info: { label: "Item 2" } },
      { id: 3, info: { label: "Item 3" } }
    ];

  angular.module("selectOptionsTest", []) .controller("SelectOptionsController", ["$scope", function ($scope) { $scope.options = [ { id: 1, info: { label: "Item 1" } }, { id: 2, info: { label: "Item 2" } }, { id: 3, info: { label: "Item 3" } } ]; $scope.selectopt = function () { $scope.opt = { id: 1, info: { label: 'Item 1' } }; }; }]);

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.js"> </script> <div ng-app="selectOptionsTest" ng-controller="SelectOptionsController"> <select ng-model="opt" ng-options="option.id as option.info.label for option in options"></select> <input type="button" ng-click="selectopt()" value="select" /> </div>

編輯1：

在這里，我添加了我的代碼，這些代碼幾乎與插件代碼相似。

控制器代碼：

(function () {
    'use strict';
    angular
    .module('app.module')
    .controller('SomeController', SomeController);

    SomeController.$Inject = [
        '$scope'
    ];

    function SomeController(
        $scope
    ) {

        $scope.GetOptions = function () {
            OptionsService.Get().then(function (response) {
                $scope.Options = response.value;
            }, ErrorHandlerService.ShowError);
        };

        $scope.GetOptions();

        $scope.Edit = function (index) {
            $scope.SelectedOption = $scope.Options[index].id;
        };

    }

})();

HTML代碼：

<select name="Contrato" class="form-control" ng-model="SelectedOption" required autofocus ng-disabled="!IsEditMode"
        ng-options="c.id as c.info.name for c in Options track by c.id">
</select>

選項JSON

[
    {
      "info":{
        "name":"AAA"
      },"id":1
    },
    {
      "info":{
        "name":"BBB"
      },"id":2
    }
]

Answer 1

在您的情況下， $scope.opt模型保存選擇。 但是，當您顯示整個對象時，您並沒有真正使用它。 因此$scope.opt不包含整個對象，僅包含option.id 。 因此，為了使其正常工作，您需要為模型手動分配一個ID。

$scope.selectopt = function () {
   $scope.opt = 1;
};

在這種情況下，將其分配為1 ，這是當前選項中第一個對象的ID。

理想情況下，使用變量而不是硬編碼，例如：

$scope.selectopt = function () {
  $scope.opt = $scope.options[0].id;
};

Answer 2

將ng-model綁定到select時，只要更改select選項，模型（opt）就會更新。

如果您想獲取“ opt”的值並將其用於其他用途或保存等，則可以使用“選擇”按鈕。但是，如果您要做的只是更改它，則只需更改select的值即可足夠。

如果要將整個對象設置為“ opt”，則將選擇更改為此：

<select ng-model="opt"
            ng-options="option as option.info.label for option in options"></select>

Answer 3

只需檢查foll鏈接即可...獲取層次結構

https://plnkr.co/edit/VQsJBR2lx7zTJxebriZW?p=preview

<body>
  <div ng-app="selectOptionsTest" ng-controller="SelectOptionsController">
    <select ng-model="id" ng-options="option.id as option.info.label for option in options"></select>
    <input type="button" ng-click="selectopt()" value="select" />
    <p> Selected:{{opt}}</p>
  </div>
</body>





$scope.selectopt = function() {
          $scope.opt = $scope.options[$scope.id-1];
        };

帶有分層數據的選項未選擇

問題描述

3 個解決方案

解決方案1
1 2016-06-29 17:27:48

解決方案2
0 2016-06-29 17:32:28

解決方案3
0 2016-06-29 19:26:52

帶有分層數據的選項未選擇

問題描述

3 個解決方案

解決方案1 1 2016-06-29 17:27:48

解決方案2 0 2016-06-29 17:32:28

解決方案3 0 2016-06-29 19:26:52

解決方案1
1 2016-06-29 17:27:48

解決方案2
0 2016-06-29 17:32:28

解決方案3
0 2016-06-29 19:26:52