Question

我在选择中提交项目列表时出现问题，我从角度开始，仍然有点丢失。这是我在这里的第一篇文章！

在我的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();

我意识到的一件事是从角度调用方法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',
                }
            ];

当我从函数中填充值时，作为示例，我的选择显示所有项目。现在如果我从我的角度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>

Answer 1

编辑：

将ng-cloak放入正文或标记处理{{list.name}}问题。
制作$ scope.lista = []并在select with with
中使用ng-if
```
ng-if="lista.length > 0"
```
解决了渲染选择选项的问题。

将ng-cloak放在身体或标签上。

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

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

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

Answer 2

ngIf函数可以更改HTML的预览，并在上传可疑或复杂的情况下产生遗留问题。对于像你的情况一样的快速搜索，函数有一个非常有效的工作。

选择组件的问题

2 个答案: