Блог

Я пытаюсь скрыть или отобразить <select> тег на основе ссылки на массив [] или нет. <select> Тег поддерживается тем же массивом.

 <select ng-show="model.people" ng-model="model.selectedPerson" ng-options="person.name for person in model.people"></select>
 

Однако он не работает. model.people изначально [] .

При добавлении первого элемента, используя model.addPerson() , я надеялся model.people быть правдивым и, следовательно, установить для ng-show значение истины и в конечном итоге <select> отобразить тег.

код javascript:

 angular.module('app', [])
        .controller('FormController', function($scope) {
            var model={};
            model.person=function(person){
                return{
                        name:person.name,
                        age:person.age
                        };
            };
            model.people=[];
            model.addPerson=function(person){
                model.people.push(new model.person(person));
                if(model.people){
                    console.log(true);
                }else{
                    console.log(false);
                }
            };
            model.selectedPerson=model.people[0];
            $scope.model=model;
        });
 

HTML-код:

 <form name="form" ng-controller="FormController" ng-submit="model.addPerson(model.anyPerson)" novalidate>
    <input type="text" ng-model="model.anyPerson.name" ng-required="true" placeholder="Name"/><br/>
    <input type="number" name="age" ng-model="model.anyPerson.age" min="15" max="100" ng-required="true" placeholder="Age"/><br/>
    <button type="submit" ng-disabled="form.$invalid">Add Person</button><br/>
    <select ng-show="model.people" ng-model="model.selectedPerson" ng-options="person.name for person in model.people"></select><br/>
    <span ng-show="model.selectedPerson" ng-bind-template="Name: {{model.selectedPerson.name}}, Age: {{model.selectedPerson.age}}"></span>
</form>
 

Пустой массив (после назначения) становится объектом. Кажется, что этот объект всегда соответствует действительности (пустой или нет).

 var empty = [];
if (empty) { 1; } else { 2; }
 

Приведенный выше код в моем тестировании всегда возвращается 1 .

Поэтому я предлагаю вам использовать length > 0 вместо ng-show :

 <select ng-show="model.people.length > 0" ng-model="model.selectedPerson" ng-options="person.name for person in model.people"></select>