Хобрук: Ваш путь к мастерству в программировании

Выпадающий список Angular добавляет опцию к извлеченным данным

Я довольно долго просматривал SO, но ни один из даже отдаленно близких мне вопросов, похоже, не содержит ответа на этот вопрос.

Ситуация следующая:

Я заполняю раскрывающийся список (или выбираю по вашему желанию) с помощью AngularJS (^ 1.6.2) данными, полученными из базы данных. Эти данные помещаются в этот выбор с помощью ng-options, при этом все правильно установлено и все.

Я пытаюсь добиться того, чтобы параметр NULL добавлялся в этот список параметров, но не к объекту $scope, содержащему извлеченные данные.

Я уточню код:

<select ng-options="item as item.name for item in items track by item.id" 
        ng-model="forms.formDataObject.item">
</select>

Это генерирует список опций, что-то вроде этого:

<select ...>
  <option value="1">Item 1</option>
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
  ...
</select>

Я попытался добавить параметр NULL в этот раскрывающийся список, используя следующий фильтр Angular:

app.filter('addNullOption', () => {
    return (input) => {
        if (!input[0].null_option) {
            var emptyObj = angular.copy(input[0]);

            Object.keys(emptyObj).forEach((key) => {
                emptyObj[key] = null;
            });

            emptyObj.null_option = true;

            input.unshift(emptyObj);
        }
        return input;
    };
})

А затем применить фильтр в ng-options, как и с другими фильтрами.

Это работает, но добавляет параметр NULL к объекту $scope вместо того, чтобы быть доступным только в $scope этого раскрывающегося списка. Я не хочу, чтобы это произошло, потому что другие раскрывающиеся списки в приложении используют один и тот же объект $scope для заполнения раскрывающегося списка, и они не должны иметь этот параметр NULL.

Подводя итог, вот мой вопрос: я хотел бы иметь возможность добавить параметр NULL в предварительно заполненный раскрывающийся список, только в $scope этого конкретного раскрывающегося списка.

Может ли кто-нибудь направить меня в правильном направлении?

javascript angularjs ng-options angularjs-scope
28.03.2017

Ответы:


1

Вместо того, чтобы назначать данные фильтра тому же массиву. Назначьте его другому массиву. Таким образом, исходный массив останется прежним.

<select ng-options="item as item.name for item in sampleAr = ( items | filter : addNullOption) track by item.id" 
        ng-model="forms.formDataObject.item">
</select>

Это может быть не лучший способ сделать это, но я несколько раз стучал головой, но это единственное решение, с которым я пришел. Надеюсь, это поможет

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.items = [{"id":1,"name":"sss","null_option":true},{"id":2,"name":"aaa"},{"id":3,"name":"fff"},{"id":4,"name":"asdas"}]
$scope.sampleAr =  angular.copy($scope.items)


$scope.addNullOption = ()=>{
 return (input) => {
        if (input.null_option) {
            $scope.items.splice(input,1)
        }
        return input;
    };
}

$scope.copys = function (item){
   return angular.copy(item);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <select ng-init="sampleAr = copys(items)"
 ng-options="item as item.name for item in sampleAr track by item.id" 
        ng-model="forms.formDataObject.item">
</select>
<div ng-init="items = items | filter :addNullOption() "> </div>
<br> 
{{items}}
<br> 
<br> 
{{sampleAr}}
</div>

28.03.2017
  • Я попробовал ваше точное решение, но проблема остается прежней. 28.03.2017
  • Вы можете опубликовать массив items 28.03.2017
  • В конце концов я исправил проблему, применив фильтр, чтобы не отображать параметр NULL в других местах, где я использую этот объект данных. Но спасибо за попытку! 29.03.2017
    • Новые материалы
    Создание кнопочного меню с использованием HTML, CSS и JavaScript
    Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..
    Внедрите OAuth в свои веб-приложения для повышения безопасности
    OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..
    Классы в JavaScript
    class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..
    Как свинг-трейдеры могут использовать ИИ для больших выигрышей
    По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..
    Как построить любой стол
    Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...
    Обзор: Машинное обучение: классификация
    Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..
    Разработка расширений Qlik Sense с qExt
    Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..