AngularJS 和 Select 事件 ng-change 未触发 / ng-blur 的问题

Question

我正在尝试学习 AngularJS，并且一直在尝试开发一种交互式表单来进行实验和学习。

目标是做到以下几点：

1. 使用 AngularJS {{template}} [WORKING] 显示列表中的项目列表
2. 单击该对象时，将其隐藏并显示下拉选择。 [工作中]
3. 选择项目或失去焦点后，隐藏下拉选择器。 [破碎]

例如，它会显示：

我最喜欢的水果是：苹果

我最喜欢的颜色是：蓝色

然后，如果您单击 APPLE，它将隐藏“APPLE”一词并显示带有其他选项的下拉列表。

我最喜欢的水果是：[选择]

[选项]苹果[/选项]

[选项]橙色[/选项]

[/选择]

我可以使用下面的代码，但是在以下情况下我遇到了隐藏选择框的问题：

1. 选择框已创建，但用户点击离开它。症状：选择框停留并且不再隐藏

2. 创建选择框，选择与之前相同的项目。症状：在这种情况下 ng-change 事件不会触发，所以我无法隐藏它。

我尝试了几种方法来解决这个问题，包括尝试 ng-blur 和添加一些 jQuery，但我想知道是否有人可以告诉我完成此问题的正确方法。

功能输出控制器（$范围）{ $scope.query = { “最喜欢的水果”：{ '选项'：['苹果'，'橙子'，'香蕉'] }, '选择切片厚度': { “默认”：1， '选项': ['0.8mm / 0.031”', '1.6mm / 0.063”', '2.0mm / 0.079”'] }, “表面处理”：{ 'options': ['Raw','Polish / Wax','Gold' ] } }; $scope.updateOnBlur = 函数 () { for（$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 不存在于您的控制器中，在您的 updateOnBlur 函数中将其更改为 $scope.query；

改变

$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>