필터 표현식을 변경 한 후 ng-repeat의 바인딩이 손실됩니다.

목록의 항목을 클릭 한 후 텍스트 상자에 입력하려고하면 반복기가 적용되지 않습니다. 그러나 목록의 항목을 클릭하지 않으면 예상대로 작동합니다. 누구든지 문제가 무엇인지 설명 할 수 있습니까?필터 표현식을 변경 한 후 ng-repeat의 바인딩이 손실됩니다.

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

출처

2014-07-23 fatih kiymet

작품. 시도해보십시오 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="[email protected]" 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>

출처

2014-07-23 20:50:37 Sid

덕분에, 정말 작동합니다 :) –

덕분에 -이 경우 : – Sid

하에서 답을 받아주십시오, 내가 입력과 결합 사업부를 보여 주었다만큼 괜찮다고 바인딩 (같은 문제가 있었다 같은 속성), 그리고 거의 읽을 때 "나는 완벽하게 작동 ... 당신은 그 전에 닫는 태그를 놓쳤다." 생각, 잘 그게 다른 바보 같은 구문 오류를 만들어 도움이되지 않습니다. 그럼 생각 좀 해봐야 겠어. 물론, 내 입력을 / – Gary

필터 표현식을 변경 한 후 ng-repeat의 바인딩이 손실됩니다.

답변

관련 문제