Проблемы с AngularJS и Select event ng-change not firing/ng-blur

Question

Я пытаюсь изучить AngularJS и пытаюсь разработать интерактивную форму для экспериментов и обучения.

Цель состоит в том, чтобы сделать следующее:

1. Показать список элементов из списка, используя AngularJS {{шаблон}} [РАБОЧИЙ]
2. Когда этот объект щелкнули, скрыть его, и показать выпадающий выбор. [РАБОТА]
3. После выбора элемента ИЛИ фокус потерян, скройте селектор выпадающего списка. [СЛОМЛЕННОЕ]

В качестве примера, он будет отображать:

Мой любимый фрукт: APPLE

Мой любимый цвет: BLUE

Затем, если нажать APPLE он скроет слово «APPLE» и отобразит раскрывающийся список с другими параметрами.

Мой любимый фрукт: [выбрать]

[опция] APPLE [/ опция]

[опция] ORANGE [/ опция]

[/ выбрать]

У меня это работает с кодом ниже, но я сталкиваюсь с проблемами, скрывающими поле выбора при следующих условиях:

1. Поле выбора создается, но пользователь нажимает на него. Симптом: выбор окна остается и никогда не скрывается снова

2. Откроется окно выбора, тот же элемент, что и раньше. Симптом: событие ng-change не срабатывает в этом случае, поэтому я не могу скрыть его.

Я попробовал несколько способов исправить это в том числе пытаясь нг-смазанности и добавить некоторые JQuery, но было интересно, если кто-то может сказать мне правильный способ сделать это.

 
    function OutputController($scope) { 

    $scope.query = { 
     'Fav Fruit': { 
      'options': [ 'Apples', 'Oranges','Banana'] 
     }, 
     'Select thickness of slice': { 
      'default': 1, 
      'options': [ '0.8mm/0.031”', '1.6mm/0.063”', '2.0mm/0.079”'] 
     }, 
      'Surface Finish': { 
      'options': ['Raw','Polish/Wax','Gold' ] 
     } 
    }; 

    $scope.updateOnBlur = function() { 
     for (name in $scope.requirements) { 
      $scope.query[name].showEdit = 0; 
     } 
    }; 
    }; 

Click on any of the items below: 

<div ng-app> 
    <div id="app_container" ng-controller="OutputController"> 
     <div ng-repeat="(name,entry) in query"><span ng-click="updateOnBlur(); entry.showEdit = true;">{{name}}: </span><span style="text-indent: 4px;" ng-show="!entry.showEdit" ng-click="updateOnBlur(); entry.showEdit = true;">{{entry.SelectedOption}}</span> 
     <select class="requirements" ng-show="entry.showEdit" ng-blur="updateOnBlur()" ng-init="entry.SelectedOption = entry.options[entry.default || 0]" ng-change="updateOnBlur()" ng-model="entry.SelectedOption" ng-options="option for option in entry.options"></select> 
     </div> 
    </div> 
</div> 

Answer 1

$scope.requirements не существует в вашем изменении контроллера, чтобы это $scope.query в вашей функции updateOnBlur;

изменение

$scope.updateOnBlur = function() { 
     for (name in $scope.requirements) { 
      $scope.query[name].showEdit = 0; 
     } 
    }; 

в

$scope.updateOnBlur = function() { 

     for (name in $scope.query) { 

      $scope.query[name].showEdit = 0; 
     } 
    }; 

var app = angular.module('app', []); 
 

 
app.controller('homeCtrl', function($scope) { 
 

 
    $scope.query = { 
 
    'Fav Fruit': { 
 
     'options': ['Apples', 'Oranges', 'Banana'] 
 
    }, 
 
    'Select thickness of slice': { 
 
     'default': 1, 
 
     'options': ['0.8mm/0.031”', '1.6mm/0.063”', '2.0mm/0.079”'] 
 
    }, 
 
    'Surface Finish': { 
 
     'options': ['Raw', 'Polish/Wax', 'Gold'] 
 
    } 
 
    }; 
 

 
    $scope.updateOnBlur = function() { 
 

 
    for (name in $scope.query) { 
 

 
     $scope.query[name].showEdit = 0; 
 
    } 
 
    }; 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="homeCtrl"> 
 
    <div ng-repeat="(name,entry) in query"><span ng-click="updateOnBlur(); entry.showEdit = true;">{{name}}: </span><span style="text-indent: 4px;" ng-show="!entry.showEdit" ng-click="updateOnBlur(); entry.showEdit = true;">{{entry.SelectedOption}}</span> 
 
     <select ng-show="entry.showEdit" class="requirements" ng-blur="updateOnBlur()" ng-init="entry.SelectedOption = entry.options[entry.default || 0]" ng-change="updateOnBlur()" ng-model="entry.SelectedOption" ng-options="option for option in entry.options"></select> 
 
    </div> 
 
    </div> 
 
</div>