选择组件的问题答案

【问题标题】：Problems with select component选择组件的问题
【发布时间】：2017-07-01 01:57:02
【问题描述】：

我在从我的选择中提交我的项目列表时遇到问题，我从 angular 开始，但仍然有点迷茫。这是我在这里的第一篇文章！

在我的 HTML 中，我使用 ng-repeat 列出所有项目，当我的屏幕加载我的第一个也是唯一的项目时：{{list.name}}，当我点击这个项目 {{list.name}} 时，ai 会正确加载列表。

<select data-placeholder="Escolha uma Empresa/Filial" multiple chosen
    style="width: 100%;"
    ng-model="filtroRequisicao.codigoSistemaUsuariosFiliais"
    required>
    <option ng-repeat="list in lista" ng-value="list.id">
         {{list.name}}
    </option>
</select>

Angularjs：

$scope.lista = [{}];

    //Carrega as Filiais dos Cooperados
        $scope.loadFiliais = function () {
            var usuario = localStorage.getItem("usuarioAutenticado");
            var objetoUsuario = {};

            objetoUsuario = JSON.parse(usuario);


            $http({
                method: 'PUT',
                url: '/getFiliais',
                data: objetoUsuario
            }).then(function (response) {

                    $scope.lista = response.data;

                    console.log($scope.lista);
                },

                function (response) {
                    console.log(response.data);
                    $scope.showNoty('Nenhum dado encontrado.', 'information');
                });
        };

        $scope.loadFiliais();

我意识到的一件事是从 angular 的方法 PUT 调用开始我的列表。

$scope.lista =
            [
                {
                    'id': 1,
                    'name': 'American Black Bear',
                },
                {
                    'id': 2,
                    'name': 'Asiatic Black Bear',
                },
                {
                    'id': 3,
                    'name': 'Brown Bear',
                },
                {
                    'id': 4,
                    'name': 'Giant Panda',
                },
                {
                    'id': 5,
                    'name': 'Sloth Bear',
                },
                {
                    'id': 6,
                    'name': 'Sun Bear',
                },
                {
                    'id': 7,
                    'name': 'Polar Bear',
                },
                {
                    'id': 8,
                    'name': 'Spectacled Bear',
                }
            ];

例如，当我从函数中填充值时，我的选择会显示所有项目。现在，如果我从我的 angular PUT (response.data) 填充返回值，我的选择不会得到任何项目。

在我看来，在我完成加载我的所有控制器之前，html 正在加载。

我不知道我是否找错了方向，但在我看来这是一个问题，我不知道如何解决

更新

CSS

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

index.html:

<link rel="stylesheet" href="./vendor/angular/angular-csp.css"/>

表格：

<div class="panel-body">
   <p class="lt-label-required">Situação</p>
   <select data-placeholder="Escolha uma Empresa/Filial" multiple class="chosen ng-cloak" chosen style="width: 100%;"
       ng-model="filtroRequisicao.codigoSistemaUsuariosFiliais"
       required>

       <option ng-repeat="list in lista" value="{{list.id}}">
             {{list.name}}
       </option>

    </select>
 </div>

角度：

$scope.loadFiliais= function () {
            $http({
                method: 'PUT',
                url: '/getFiliais'
            }).then(function (response) {
                    $scope.lista = response.data;
                    console.log($scope.lista);
                },
                function (response) {
                    console.log(response.data);
                    $scope.showNoty('Nenhum dado encontrado.', 'information');
                });
        };

        $scope.loadFiliais();

更新解决方案

我能够解决我的问题，但我希望您能帮助我了解这是否是正确的方法：

我使用了 ng-if，这样当我的 $scope.lista 为 null-dir 时，ng-if 将删除并重新创建 elemento。

https://docs.angularjs.org/api/ng/directive/ngIf

角度：

$scope.lista = [];

HTML：

    <select data-placeholder="Escolha uma Empresa/Filial" multiple chosen
        style="width: 100%;"
        ng-if="lista.length > 0"
        ng-model="filtroRequisicao.codigoSistemaUsuariosFiliais"
        required>
        <option ng-repeat="list in lista" ng-value="list.id">
             {{list.name}}
        </option>

</select>

【问题讨论】：

标签： javascript angularjs spring-boot

【解决方案1】：

编辑：

将 ng-cloak 放到正文或标签中可以解决 {{list.name}} 问题。
制作 $scope.lista = [] 并在 select with 中使用 ng-if
```
ng-if="lista.length > 0"
```
解决了呈现选择选项的问题。

将 ng-cloak 放在 body 或标签上。

在这里阅读：https://docs.angularjs.org/api/ng/directive/ngCloak。

这将解决 {{list.name}} 问题。

使 $scope.lista = [] 而不是 [{}];

【讨论】：

抱歉我的无知，我根据文档在 index.html 中添加了 css，我将 ng-cloak 类放在我的选择中：codecode 并初始化了我的#scope.list = [];现在 {{list.name}} 不见了，选择是空的
它解决了问题吗？您可以尝试在$scope.loadFiliais(); 之后添加$scope.$apply();
没有解决，ng-cloak和$ scope.apply都没有，出现如下错误：link[link]
你的promise中console.log($scope.lista)的输出是什么？
当我加载一个屏幕时，$scope.list = []，在加载选择组件后，执行一个函数 $scope.loadFiliais，它会提供给我的 $scope.list 值：code。 (2) [对象，对象] 0：对象 1：对象长度：2 code.

【解决方案2】：

ngIf 函数可以更改 HTML 的预览，并在上传可疑或复杂的情况下产生破坏性后果。对于像您的情况这样的快速搜索，函数具有非常有效的工作。

【讨论】：