Angular ng-if 没有按预期响应

Posted 2023-02-22

【中文标题】Angular ng-if 没有按预期响应

【英文标题】：Angular ng-if not responding as expected

【发布时间】：2016-02-27 18:44:41

【问题描述】：

我有 li 元素，它们有一个绑定到复选框的 ng-if 语句。如果我实际选中该复选框，ng-if 会按预期响应。但是，如果我通过 javascript 选中或取消选中复选框，复选框会按预期被选中或取消选中，但 ng-if 没有响应。这是否正常工作？有没有更好的方法来做到这一点？

这是我的代码示例："[]" = ""

html - 第 1 部分

[li id="homebutton" ng-if="homechecked != true" onclick="homeclicked()"][a ng-href="/"][img src="images\Neck01Home.png" alt ="首页" /][/a]

[li id="thebandbutton" ng-if="homechecked===true" onclick="thebandclicked()"][a ng-href="/theband/"][img src="images\Neck01TheBand. png" /][/a]

HTML - 第 2 部分

[label class="menucontroller"]Home2: [input class="menucontroller" id="homecb" type="checkbox" ng-model="homechecked" ng-init="homechecked=true" /][/标签][br /]

[label class="menucontroller"]TheBand2: [input class="menucontroller" id="bandcb" type="checkbox" ng-model="thebandchecked" /][/labe][

[label class="menucontroller"]Gallery2: [input class="menucontroller" id="gallerycb" type="checkbox" ng-model="gallerychecked" /][/label][br /]

JavaScript：

window.onload = function () 


function homeclicked() 
    document.getElementById('homecb').checked = true;
    document.getElementById('bandcb').checked = false;
    document.getElementById('gallerycb').checked = false;


function thebandclicked() 
    document.getElementById('homecb').checked = false;
    document.getElementById('bandcb').checked = true;
    document.getElementById('gallerycb').checked = false;


function galleryclicked() 
    document.getElementById('homecb').checked = false;
    document.getElementById('bandcb').checked = false;
    document.getElementById('gallerycb').checked = true

【问题讨论】：

@ebik 正确编辑您的问题..您可以使用 angularjs 函数来选中和取消选中复选框..

【参考方案1】：

你做错了，ng-if 不会触发，因为你只操作复选框的选中和取消选中（使用 javascript）而不是 ng-model，不要尝试使用 javascript 来执行此操作，而是执行它在你的角度控制器上。

控制器：

$scope.homeclicked = function() 
  $scope.homechecked = true;
  $scope.thebandchecked = false;
  $scope.gallerychecked = false;
;

复选框输入上的ng-model处理选中和取消选中，还有一个原生指令https://docs.angularjs.org/api/ng/directive/ngChecked用于处理选中和取消选中。

【参考方案2】：

以适当的角度进行。

在控制器中移动函数。通过ng-click 给他们打电话。让函数更改绑定到复选框的范围变量。

<li id="homebutton" ng-if="homechecked != true" ng-click="homeclicked()">

同时在你的范围内...

$scope.homeclicked = function  
    $scope.homechecked = true;
    $scope.thebandchecked = false;
    $scope.gallerychecked = false;

---

如果你真的想无视我的建议并继续你所拥有的，顺便说一句，这很糟糕，你可以在你的函数中添加这一行： angular.element(document.getElementById('homecb ')).$scope().$apply();这又是非常糟糕的，应该完全避免。

【参考方案3】：

使用

 $scope.$apply();

它将运行摘要循环，您的 ng-if 将按预期工作。

【讨论】：

感谢您的输入，我想以正确的方式进行操作......我是 Angular 的新手（很明显！）。我明天将尝试这些建议。现在已经很晚了。谢谢