2016-05-06 69 views
1

我想做一個腳本,將一個選擇標記模型的值複製到另一個,然後使用複選框觸發它的ng-change功能。發生什麼是當你點擊複選框時,它會複製該值,但觸發器不再工作。似乎設置模型的值和執行觸發器之間存在衝突,因爲其中一個失敗。AngularJS select change trigger

這裏是我的代碼:

<!DOCTYPE html> 
<html ng-app="myApp"> 

    <head> 
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
    </head> 

    <body ng-controller="myCtrl"> 
    <select ng-model="first.selection" id="first" ng-change="changeOver('dean')"> 
     <option value="1">One</option> 
     <option value="2">Two</option> 
     <option value="3">Three</option> 
    </select> <br /> 
    <input type="checkbox" ng-model="same" id="same" ng-change="sameAsAbove(first, second)"> Same as above <br /> 
    <select ng-model="second.selection" id="second" ng-change="changeOver('armada')"> 
     <option value="1">One</option> 
     <option value="2">Two</option> 
     <option value="3">Three</option> 
    </select> 
    <!-- <span id="clickMe">Click Me!</span> --> 
    <script type="text/javascript"> 
     app = angular.module('myApp', []); 
     app.controller('myCtrl', function($scope, $timeout){ 
     $scope.first = {}; 
     $scope.second = {}; 
     $scope.sameAsAbove = function(primary, receiver){ 
      receiver['selection'] = primary['selection']; 
      $timeout(function() { 
       angular.element(document.getElementById('second')).triggerHandler('change'); 
      }, 100); 
     }; 
     $scope.changeOver = function(value){ 
      alert(value); 
     } 
     }); 
     $("#clickMe").click(function(){ 
     // alert("czxvzx"); 
     // $("#same").trigger("click"); 
     $("#changes").change(); 
     }); 
    </script> 
    </body> 
</html> 

這裏是plunkr網址:http://plnkr.co/edit/zErS4DaTgR79SBLbtGOy?p=preview

回答

1

在DOM身體,你應該改變這一行這樣的。

<select ng-model="second.selection" id="second" ng-change="same=second.selection"> 

和利用手錶來改變複選框值

$scope.$watch("same", function(newValue, oldValue){ 
     $scope.changeOver('armada'); 
     //or do anything 

    }); 

plunker demo link

+0

哇感謝!我從來不知道$ scope。$ watch。非常感謝! –

相關問題