ng-if 在 ng-change 中不起作用答案

【问题标题】：ng-if is not working in ng-changeng-if 在 ng-change 中不起作用
【发布时间】：2016-10-26 17:51:38
【问题描述】：

我正在使用 AngularJS，并尝试使用 $scope.status 使微调器可见和不可见。我在 ng-change 函数中设置状态值。它适用于第一行代码，但在使其不可见时，$scope.status 已更新，但 HTML 并未隐藏微调器。

控制器

angular.module('starter')
  .controller('controller',['$scope','myService',myCtrl]);

function myCtrl($scope,myService){
   var newFunc = function(callback){
       myService.update(function(result){
          console.log("Calling service..."); /* Is calling each time I reload the page */
          result == true ? callback(true) : callback(false);
       });
   };

   $scope.onChangeCode = function(){
      console.log("onChanging...");
      $scope.status = true;
      newFunc(function(result){
         $scope.status = false; /* Status set to false, BUT HTML didn't update, spinner still showing*/
      });
   }
}

HTML

<span ng-if="status == true">
    <ion-spinner  icon="spiral"></ion-spinner>
</span>
<input ng-model="code" ng-change="onChangeCode()"/>

问题

ng-if=true 可以很好地使微调器可见，但是当 ng-change 中的 ng-if=false 时，它并没有隐藏微调器。

【问题讨论】：

函数是“每次重新加载时调用”当你定义它时？！我认为您需要提供更多真实的代码才能确定这里发生了什么……
请提供更多详细信息，例如输入类型和更多代码详细信息。
@SanketTarodekar 更新。

标签： javascript angularjs

【解决方案1】：

在您缺少 ngModel 的代码中，ngChange 需要 ngModel 绑定，因为需要 ngModel

var app = angular.module("app", []);

app.controller("ctrl", function($scope){
$scope.checkIt = function() {
  console.log("here")
}
})

<body ng-app="app" ng-controller="ctrl">
  
  <input ng-model="me" ng-change="checkIt()">
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </body>

【讨论】：

对不起，我的问题不再是关于那个调用函数了。目前，ng-if 在 ng-change 中无法正常工作。

【解决方案2】：

使用您向我们展示的代码，我认为它不会在您每次刷新时调用myService.update。可能您可能需要添加 myService 的外观

你真的需要newFunc吗？那部分让人困惑我认为您可能可以做类似的事情

$scope.onChangeCode = function(){
    console.log("onChanging...");
    $scope.status = true;
    myService.update(function(result){
        $scope.status = result
    });
}

【讨论】：

【解决方案3】：

您可以使用ng-show 代替ng-if。 ng-if 指令根据表达式删除或重新创建 DOM 树的一部分。 ng-show 指令根据提供给 ng-show 属性的表达式显示或隐藏给定的 HTML 元素。你可以使用ng-show="status" 无论如何它都可以工作。

【讨论】：

【解决方案4】：

值更改后，由于我想是回调，视图没有更新。更新状态后使用$scope.$apply();；

https://embed.plnkr.co/t191Ed4bAcgbqkkTIIZV/

希望对你有所帮助。

【讨论】：

【解决方案5】：

我添加了 $scope.status = false;在控制器的顶部。和 $scope.$apply();更新后状态；

也许这个工作

angular.module('starter')
  .controller('controller',['$scope','myService',myCtrl]);

function myCtrl($scope,myService){
     $scope.status = false;//Added this line
   var newFunc = function(callback){
       myService.update(function(result){
          console.log("Calling service..."); /* Is calling each time I reload the page */
          result == true ? callback(true) : callback(false);
       });
   };

   $scope.onChangeCode = function(){
      console.log("onChanging...");
      $scope.status = true;
      newFunc(function(result){
         $scope.status = false; 
      $scope.$apply(); //Added this line
      });
   }
}

【讨论】：