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

Как заполнить поле выбора angular на основе значения логического значения

У меня есть класс Job со свойством «TESPM», а также класс сотрудников. Одним из свойств сотрудника является «EmployeeIsPM». Прямо сейчас у меня есть поле выбора, возвращающее значения EmployeeIsPM «true» и «false». Но мне нужно, чтобы поле выбора отображало «EmployeeFirstName» и «EmployeeFirstName» сотрудников, для которых установлено значение «true».

У меня есть установка plunkr для работы. Однако я не смог заставить поле ввода отображать текущий TESPM. plunkr

     <span class="input-group-addon">Select New TESPM</span>
         <select class="form-control" ng-options="job.Employees[0].EmployeeIsPM for job in jobArray" ng-model="Employees[0].EmployeeIsPM">
            <option value="" disabled>Select</option>
         </select>

Когда выбран новый сотрудник, мне нужно, чтобы имя и фамилия были вставлены в поле ввода.

 <span class="input-group-addon">J. TESPM</span>
 <input style="width:150px" ng-model="currentItem.TESPM" class="form-control" type="text">

Ошибка обновления в журнале консоли

{TypeError: undefined is not a function
at g.<anonymous> (http://localhost:44301/MyScripts/app.js:215:15)
at e (http://localhost:44301/Scripts/angular.min.js:155:305)
at Ia.| (http://localhost:44301/Scripts/angular.min.js:143:226)
at u.constant (http://localhost:44301/Scripts/angular.min.js:154:182)
at h [as $render] (http://localhost:44301/Scripts/angular.min.js:190:25)
at Object.<anonymous> (http://localhost:44301/Scripts/angular.min.js:172:335)
at g.$digest (http://localhost:44301/Scripts/angular.min.js:98:177)
at g.$apply (http://localhost:44301/Scripts/angular.min.js:101:12)
at http://localhost:44301/Scripts/angular.min.js:17:415
at Object.d [as invoke] (http://localhost:44301/Scripts/angular.min.js:30:328)
{input:  
{Object
{TypeError: undefined is not a function
at g.<anonymous> (http://localhost:44301/MyScripts/app.js:215:15)
at e (http://localhost:44301/Scripts/angular.min.js:155:305)
at Ia.| (http://localhost:44301/Scripts/angular.min.js:143:226)
at u.constant (http://localhost:44301/Scripts/angular.min.js:154:182)
at Object.h (http://localhost:44301/Scripts/angular.min.js:190:25)
at g.$digest (http://localhost:44301/Scripts/angular.min.js:98:177)
at g.$apply (http://localhost:44301/Scripts/angular.min.js:101:12)
at http://localhost:44301/Scripts/angular.min.js:17:415
at Object.d [as invoke] (http://localhost:44301/Scripts/angular.min.js:30:328)
at Wb.c (http://localhost:44301/Scripts/angular.min.js:17:323)
{input:  
{Object

Строка 215 в app.js

 // for all TESPM's
    input.forEach(function (tespm) {
angularjs asp.net-mvc
22.08.2014

  • где вы выбираете менеджера? Я вижу, вы показываете только сотрудников менеджера, у которого есть TESPM, как истинных 22.08.2014
  • не совсем уверен, что я слежу за вами... Класс Job имеет свойство TESPM. Это поле ввода заполняется текущим заданием TESPM. Класс Employee имеет логическое значение, указывающее, что он является менеджером проекта. Итак, у меня есть поле выбора, в котором перечислены все сотрудники из базы данных. Когда я выбираю нового сотрудника из опции, мне нужно, чтобы имя и фамилия сотрудников заполняли ввод TESPM. извините, если я не объясняю это достаточно ясно. 22.08.2014
  • Итак, первая часть правильно отображает имя и фамилию сотрудника в раскрывающемся списке? затем скопируйте то же самое в поле ввода 22.08.2014
  • Да исправить. Только сотрудники с параметром EmployeeIsPM равным true 22.08.2014

Ответы:


1

Вы можете применить собственный фильтр, чтобы получить желаемых сотрудников из jobArray. В вашем случае нужные сотрудники — это сотрудники (FirstName + LastName), у которых для свойства EmployeeIsPM установлено значение true. Таким образом, вы можете использовать следующую реализацию:

testapp.filter('filterEmployees', function() {
  return function (input) {
    console.log('input: ', input);
    var output = [];
    if (!input instanceof Array) {
      console.log('error');
      return output;
    }
    // for all TESPM's
    input.forEach(function (tespm) {
      var employees = tespm.Employees; 
      if (!employees instanceof Array) {
        console.log('error');
        return output;
      }
      // for all employees
      employees.forEach(function (employee) {
        // filter
        if (employee.EmployeeIsPM) {
          output.push(employee.EmployeeFirstName + ' ' + employee.EmployeeLastName);
        }
      });
    });
    console.log('output: ', output);
    return output;
  };
});

Вышеупомянутый фильтр принимает jobArray и возвращает массив со всеми сотрудниками для всех TESPM, у которых EmployeeIsPM == true. Я не мог понять из вашего описания, нужны ли вам сотрудники для TESPM, в этом случае может потребоваться изменение фильтра.

Элемент select может получить свои параметры, отфильтровав jobArray следующим образом (я использую ng-модель с именем selectedPM):

<select class="form-control" ng-options="empl for empl in jobArray|filterEmployees" ng-model="selectedPM">
    <option value="">Select</option>
</select>

Если вы хотите, чтобы на входе отображалось значение, выбранное из раскрывающегося списка, вы можете использовать ту же ng-модель (которую вы использовали в элементе выбора) для элемента ввода следующим образом:

<div>
    Project Manager: <input ng-model="selectedPM" type="text"/>
</div>
22.08.2014
  • работал отлично. Я только что переключил модель ng с selectedPM на TESPM. сделал именно то, что мне было нужно! 23.08.2014
  • В консоли есть ошибки. Я собираюсь отредактировать вопрос, чтобы добавить его 23.08.2014
    • Новые материалы
    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..
    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..
    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..
    Введение в Джанго Фреймворк
    Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..
    Настольный ПК как «одно кольцо, чтобы править всеми» домашних компьютеров
    Вид после 9 месяцев использования С настольных компьютеров все началось, но в какой-то момент они стали «серверами», и мы все перешли на ноутбуки. В прошлом году я столкнулся с идеей настольных..
    Расширенные методы безопасности для VueJS: реализация аутентификации без пароля
    Руководство, которое поможет вам создавать безопасные приложения в долгосрочной перспективе Безопасность приложений часто упускается из виду в процессе разработки, потому что основная..
    стройный-i18следующий
    Представляем стройную оболочку для i18next. Эта библиотека, основанная на i18next, заключает экземпляр i18next в хранилище svelte и отслеживает события i18next, такие как languageChanged,..