Question

我的HTML中有这个。忽略任何内联样式，我正在测试，

<label class="toggle" style="float: right;">
  <input id="check" type="checkbox" ng-model="check" ng-change="funCheck(check)">
  <div class="track">
    <div class="handle"></div>
  </div>
</label>       

<div ng-init="fromClock='01:00'; toClock='03:30';">
  <clock-editor from="fromClock" to="toClock" 
                on-change="fromClock = from; toClock = to; funClock(from, to);"> 
  </clock-editor>                   
  <strong>{{fromClock}}</strong>
  <strong>{{toClock}}</strong>
</div>

这是一个切换单选按钮和一个时钟。

然后我在控制器中有这两个功能：

            $scope.funCheck = function(check) {                 
                alert(check);                   
            };

            $scope.funClock = function(f_from, f_to) {                  
                    console.log(f_from + "---" +f_to)
                    $scope.check = false;                               
                }               
            };

当切换开启时，我从时钟的某个地方发送时间。这没关系。但是，如果时间已更改，我想要做的是取消选中切换。

我可以使用 document.getElementById（＆＃39; check＆＃39;）。checked = false; ，然后切换回来，但 ng-change 那台收音机再次开火，直到我仔细检查。就像价值没有改变，即使我可以看到它是如何在视觉上关闭的。

Answer 1

使用angular的重点是你不应该像你一样手动编辑DOM。

更改代码的这部分，取消选中复选框

$scope.funClock = function(f_from, f_to) {                  
    if (document.getElementById('check').checked) {
        document.getElementById('check').checked = false;                                   
    }               
};

到

$scope.funClock = function(f_from, f_to) { 
    if($scope.check){
        $scope.check = false;
    }                          
};

此外，您不应该关心检查它是否已经检查过，就像您将检查设置为false并且它已经是假的那样没有变化所以只需删除{完全{1}}声明。

修改

似乎if只会在输入本身发生更改时触发，如果更改是以编程方式发生的话，则不会触发，因此有两种方法可以执行此操作。

调用ng-change。

这将是

funClock

添加$scope.funClock = function(f_from, f_to) { if($scope.check){ $scope.check = false; funCheck($scope.check); } };。

或手表的代码

check

Answer 2

ng-model不适用于strong元素，且ng-change元素没有strong个事件。所以基本上你可以通过使用这样的两个监视变量来实现这一点，希望这对你有帮助。

        $watch(function(){
            return $scope.fromClock;
        }, function() {
            $scope.funCheck();
        })

        $watch(function(){
            return $scope.toClock;
        }, function() {
            $scope.funCheck();
        })

Answer 3

在angularjs中，我们无法直接更改元素值。我们要使用$compile。首先将其包含在控制器中然后再使用它很明智 -

var list = '<input id="check" type="checkbox" ng-model="check" checked ng-change="funCheck(check)">';

var selctr = $("#selector");
var ele = angular.element(list);
compiled = $compile(ele);
selctr.html(ele);
compiled($scope);

更改后，ng-change不会再次触发其值

3 个答案: