Question

我有一个名为count的属性，它通过ng-model附加到视图中。确切地说，ng-model被插入HTML元素中。意思是，用户可以更改count属性的值。

AngularJS控制器部分

app.controller("QuizController", ['$scope' function (scope) 
{
  $scope.count = 1;

  $scope.pageLocatorChange = function()
  {
       $scope.count = this.count;
  }

  $scope.increment = function()
  {
      $scope.count = $scope.count + 1;
  }

}

HTML部分

<li>
    <a ng-click="increment()">>
    </a></li>
    <li>
    <input class="pageLocator" type="number" 
    ng-model="count" min="0" 
    ng-change="pageLocatorChange()">
    </li>

问题是，当我使用＆gt;时，视图会更新按钮增加计数属性。那一刻，我已经从输入字段更改了count属性值，当我点击＆gt;时，它在输入字段中停止更新。锚标签，但模型是更新。

除了查看更新外，所有逻辑都有效。只是视图的一部分没有收到更新模型。我不知道为什么？

更多信息：触发更改事件后，它不会从点击事件中收到新值。

更多更新：时刻更改事件被激活，在此处创建了一个计数属性，输入框将绑定到它（this.count）。计数的变化不会影响this.count，因此输入框值不会改变，除非有人直接在输入框中更改

我通过检查是否存在一个名为count的属性来修复它，然后用语法递增它们。

$scope.increment = function()
      {
          $scope.count = $scope.count + 1;
           if(this.count != undefined)
             {
             this.count ++;
             }

      }

有人可以帮助我吗？

Answer 1

您的问题中有一些不匹配的标签/变量名称错误。我已经添加了下面的代码段，一切都按预期工作。

单击HELLO以增加 - 然后输入到incrment / decrement

angular.module('app', [])
.controller("QuizController", ['$scope', function ($scope) {
  $scope.count = 1;

  $scope.pageLocatorChange = function()
  {
       $scope.count = this.count;
  }

  $scope.increment = function()
  {
      $scope.count = $scope.count + 1;
  }

}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='QuizController'>
 <a ng-click="increment()">HELLO</a>
 <li>
  <input class="pageLocator" type="number" 
    ng-model="count" min="0" 
    ng-change="pageLocatorChange()">
 </li>
</div>

Answer 2

试试这个

angular.module('app', [])
.controller("QuizController", ['$scope', function ($scope) {
  $scope.count = 1;

  $scope.pageLocatorChange = function()
  {
       $scope.count = this.count;
  }

  $scope.increment = function()
  {
      $scope.count ++;
  }

}]);



<div ng-app='app' ng-controller='QuizController'>
  <a ng-click="increment()">></a>
  <li>
   <input class="pageLocator" type="number" 
    ng-model="count" min="0" 
    ng-change="pageLocatorChange()">
  </li>
</div>

Answer 3

Angular会自动更新您的范围变量。

然后您不需要在输入中调用ng-change。

在scope

处的function($scope)添加'$'

尝试不使用ng-change：

app.controller("QuizController", function ($scope) 
{
  $scope.count = 1;

  $scope.increment = function()
  {
      $scope.count++;
  }

}

<li>
   <a ng-click="increment()">
      >
   </a>
</li>
<li>
<input class="pageLocator" type="number" 
ng-model="count" min="0">
</li>

<强> JSFiddle Example

Answer 4

当时更改事件被激活，有一个名为count的属性，在此创建并且输入框绑定到它（this.count）。 $ scope.count中的更改不会反映到this.count，因此输入框值不会更改，除非有人直接在输入框中更改

我已经通过检查是否存在一个名为count的属性来修复它，然后用语法递增它们。

      $scope.increment = function()
      {
          $scope.count = $scope.count + 1;
           if(this.count != undefined)
             {
             this.count ++;
             }

      }

如果有人在这里有更好的解决方案，请在此处发布。

ngmodel在前端没有改变

4 个答案: