Question

单击列表中的项目后，如果尝试键入文本框，则不会影响转发器。但是，如果我没有点击列表中的任何项目，它将按预期工作。任何人都可以解释问题是什么吗？

<!doctype html> 
<html ng-app="angularApp">
<head>
<script src="../jquery.min.js" type="text/javascript"></script>
<script src="angular.js" type="text/javascript"></script>
<script type="text/javascript">
var angularApp = angular.module('angularApp', []);

angularApp.controller('CityController', function ($scope) {
  $scope.selectedCity = null;
  $scope.query = "";

  $scope.setSelectedCity = function (event) {
      $scope.selectedCity = angular.element(event.toElement).text();
  }


  $scope.cities = [
      {
          'name': 'Istanbul',
          'value': 34
      },
      {
          'name': 'Izmir',
          'value': 35
      },
      {
          'name': 'Amasya',
          'value': 3
      },
      {
          'name': 'Amasya',
          'value': 5
      },
      {
          'name': 'Balikesir',
          'value': 14
      },
      {
          name: 'Bursa',
          value: '16'
      }
  ];

  $scope.toggleCombo = function (event) {
      var el = angular.element('.cities');
      console.dir(el);
      el.appendTo('body').show();
  };

    $scope.collapseCombo = function (event) {
        var el = angular.element('.cities');
        el.appendTo('.combo-wrapper');
        el.hide();
    }
});

</head>
<body>
<div class="combo-wrapper" ng-controller="CityController">
  <input type="text" ng-focus="toggleCombo($event)" ng-blur="collapseCombo($event)" ng-model="selectedCity"/><span></span>
  <ul class="cities">
      <li ng-repeat="city in cities | filter:selectedCity" ng-click="setSelectedCity($event)">{{city.name}}</li>
  </ul>
</div>
</body>
</html>

Answer 1

完美适合我。试试这个plnkr：http://plnkr.co/edit/OdCRhPNlrEwZIlsHjXlG?p=preview

顺便说一下，你错过了一个结束标签。

<!doctype html>
<html ng-app="angularApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" data-semver="1.2.19"></script>
  <script src="app.js"></script>
  <script type="text/javascript">
    var angularApp = angular.module('angularApp', []);

    angularApp.controller('CityController', function($scope) {
      $scope.selectedCity = null;
      $scope.query = "";

      $scope.setSelectedCity = function(event) {
        $scope.selectedCity = angular.element(event.toElement).text();
      }


      $scope.cities = [{
        'name': 'Istanbul',
        'value': 34
      }, {
        'name': 'Izmir',
        'value': 35
      }, {
        'name': 'Amasya',
        'value': 3
      }, {
        'name': 'Amasya',
        'value': 5
      }, {
        'name': 'Balikesir',
        'value': 14
      }, {
        name: 'Bursa',
        value: '16'
      }];

      $scope.toggleCombo = function(event) {
        var el = angular.element('.cities');
        console.dir(el);
        el.appendTo('body').show();
      };

      $scope.collapseCombo = function(event) {
        var el = angular.element('.cities');
        el.appendTo('.combo-wrapper');
        el.hide();
      }
    });
  </script>
</head>

<body>
  <div class="combo-wrapper" ng-controller="CityController">
    <input type="text" ng-focus="toggleCombo($event)" ng-blur="collapseCombo($event)" ng-model="selectedCity" /><span></span>
    <ul class="cities">
      <li ng-repeat="city in cities | filter:selectedCity" ng-click="setSelectedCity($event)">{{city.name}}</li>
    </ul>
  </div>
</body>

</html>

更改过滤器表达式后，ng-repeat失去其绑定

1 个答案: