Question

我正在尝试运行this示例来从具有分层数据的选择中选择一个选项，但它不起作用。

    $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：

这里我添加的代码大多类似于plunker代码。

控制器代码：

(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绑定到选择后，只要更改选择选项，模型（opt）就会更新。

如果你想取＆＃34; opt＆＃34;的值，你可以使用选择按钮。并将其用于其他内容，或保存，等等，但如果您只想更改它，那么只需更改select中的值即可。

如果您希望将整个对象设置为＆＃34;选择＆＃34;，请将您的选择更改为：

<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 个答案: