Question

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

目标是执行以下操作：

使用AngularJS {{template}} [WORKING]
单击该对象时，将其隐藏，并显示下拉选项。 [工作]
选择项目或焦点丢失后，隐藏下拉选择器。 [BROKEN]

例如，它会显示：

我最喜欢的水果是：APPLE

我最喜欢的颜色是：BLUE

然后，如果你点击APPLE它会隐藏单词＆＃34; APPLE＆＃34;并显示包含其他选项的下拉列表。

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

[选项] APPLE [/选项]

[选项] ORANGE [/选项]

[/选择

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

创建了选择框，但用户点击了该框。症状：选择框保持并且永远不会再隐藏
创建选择框，选择与之前相同的项目。症状：在这种情况下，ng-change事件不会触发，因此我无法隐藏它。

我已经尝试了几种方法来解决这个问题，包括尝试使用ng-blur和添加一些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，将其更改为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>

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

1 个答案: