jQuery的自動完成和NG-顯示

之前的純粹主義者攻擊我，我知道結合jQuery和角度，我的方式是不與節目「正確」jQuery的自動完成和NG-顯示

確定。

我有一個附有jQueryUI自動完成的文本框。這很好用！我還有一個帶有ng-show屬性的按鈕，用於評估文本框中條目的有效性。如果我手動輸入名稱，這也可以正常工作。然而。如果我開始輸入，然後點擊自動完成條目 - ng-show功能不計算。我必須手動在文本框的末尾手動添加空格或其他東西來強制它運行。

關於如何使用ng-show與jQueryUI自動完成一起使用的任何想法？

<p><input id="txtUniqueUser" ng-model="selectedUserName" name="UniqueUser" type="text" placeholder="Search For User" class="input-xlarge" style="width:80%"></p> 
<p ng-show="isValidName()"><button type="button" ng-model="selectedUserName" class="btn btn-primary btn-lg">Begin!</button></p> 

$scope.isValidName = function(){ 
     if($scope.uniqueDisplaynames.indexOf($scope.selectedUserName) != -1) 
      return true; 
     else 
      return false; 
    };

我說這個，使其工作：

$('#txtUniqueUser').on("autocompletechange",function(event,ui) 
      { 
       $scope.selectedUserName = $('#txtUniqueUser')[0].value; 
       $scope.$apply(); 
       $scope.isValidName(); 
      }); 


ARApp.directive('autoComplete', function(autoCompleteDataService) { 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attr, ctrl) { 
        // elem is a jquery lite object if jquery is not present, 
        // but with jquery and jquery ui, it will be a full jquery object. 
      elem.autocomplete({ 
       source: autoCompleteDataService.getSource(), //from your service 
       minLength: 2 
      }); 
     } 
    }; 
}); 

ARApp.factory('autoCompleteDataService', [function($scope) { 
    return { 
     getSource: function($scope) { 

      return [$scope.uniqueDisplaynames]; 
     } 
    } 
}]);

來源

2014-02-11 Wjdavis5

這是因爲，由於輸入的值由jQuery的修改，angularjs不知道有關的變化。

聲明：未測試

AngularJS反應以使用$digest週期範圍變量所作的更改，因此，當自動完成改變輸入元素的值的那些沒有得到複製到與其相關聯的模型對象。

一個簡單的解決方法應該是激發change event上的autocomplete change event元素

來源

2014-02-11 13:27:23

jQuery的自動完成和NG-顯示

回答

相關問題