Question

我有一个表单，想要创建一个完成进度跟踪器＆＃39;。如果我们有十个输入填充，每个输入将10添加到一个数组，这将呈现一些文本：＆＃39; 100％完成＆＃39;。如果您删除或没有输入中的任何数据，将从阵列中删除10。

换句话说，我想：

观看一些项目以进行更改
如果某个项目有X长度（或其他参数），请将10推送到数组
如果项目的X长度已删除，请从阵列中删除10
创建一个数组

我一直在尝试使用$scope.$watch和不同的数组方法，例如pop()，splice()等，但我不确定如何使其正常工作，还有漂亮的DRY代码。

这是我到目前为止（仅在3个项目之外简化了应用程序）。

控制器：

$scope.userName = 'homer';
$scope.userDescription = 'I really like...';
$scope.userUrl = 'http://something.com'
$scope.theArray = [];

$scope.$watch('userName + userDescription + userUrl', function(){

  $scope.theTotal = 0;

  if($scope.userName.length >= 3) {
    //$scope.theArray.pop(10);
    //$scope.theArray.splice(1,1);
    $scope.theArray.push(10);
  }

  if($scope.userName.length < 3) {
    console.info('oh no!');
    $scope.theArray.pop(10);
  }

  if($scope.userDescription.length > 3) {
    $scope.theArray.push(10);
  }

  if($scope.userUrl.length > 3) {
    $scope.theArray.push(10);
  }

  var x = 0;
  while (x < $scope.theArray.length) {
    $scope.theTotal += $scope.theArray[x];
    x++;
  }

  console.log($scope.theArray)

});

模板：

<input type="text" ng-model="userName" placeholder="name" />
<input type="text" ng-model="userDescription" placeholder="description" />
<input type="url" ng-model="userUrl" placeholder="url" />

<p>userName length: {{userName.length}}</p>
<p>userDescription length: {{userDescription.length}}</p>
<p>userURL length: {{userUrl.length}}</p>
<br/>
<p><strong>completion: {{theTotal}}</strong></p>

但是，显然，这不能正常工作。现在，无论长度是低于还是高于所需数量，数组都会不断添加和添加。我期望这个$scope.$watch，我知道当$ watch运行时会触发更改 - 有没有办法在这里限制数组push()？

我已经尝试同时进行pop()和push()这种情况在某种程度上有效，但它并不优雅，并不能帮助它按需运行。

我怎样才能做到这一点？我需要以不同的方式处理$scope.$watch和数组方法吗？或者可能是完全不同的东西？

Here is a codepen.

Answer 1

如果您没有将数组用于其他目的，则可以避免使用该数组，并且仅在满足条件时才添加总数：

$scope.theTotal = 0;
if($scope.userName.length >= 3) {
    $scope.theTotal += 10;
  }

  if($scope.userDescription.length > 3) {
    $scope.theTotal += 10;
  }

  if($scope.userUrl.length > 3) {
    $scope.theTotal += 10;
  }

选中pen。

Answer 2

托尼，让我们通过你的$watch函数。例如，我改变userName（现在它的长度<3）我们进入$watch函数：

忽略第一个if语句（我们得到长度＆lt; 3）
我们转到第二个if语句，pop()来自数组
现在你的算法不会停止并进入if($scope.userDescription.length > 3)。我没有改变userDescription，它的长度是＆gt; 3 - 所以我们在数组中添加一些val。

这就是为什么你仍然不断向数组添加新项目。

Angular $ scope。$ watch - 根据ng-model / length创建一个数组和总数

2 个答案: