Question

我需要使用angularjs进行注册表单页面，在此我需要显示已完成的百分比。我有50多个领域。我如何以一种简单的方式完成这项功能。

以下是示例代码。我不知道这是编码的好方法

HTML代码

 <script src="angular/angular.js"></script>
 <html ng-app="myapp" ng-controller='profileController'>
 <form>
   First name: <input type="text" name="firstname" ng-model="nameValue" ng-click="percentageCount()"/><br>
   Last name: <input type="text" name="lastname" ng-model="lnameValue" ng-click="percentageCount()"/>
   Age: <input type="text" name="age" ng-model="ageValue" ng-click="percentageCount()" />
   Gender: <input type="text" name="gender" ng-model="genderValue" ng-click="percentageCount()"/>
   City:  <select name="txt_country" class="drop-down-box" id="country" ng-click="percentageCount()" ng-model="countryValue">
                        <option value="" selected="selected">Select Country</option>
                        <option value="United States">United States</option>
                        <option value="United Kingdom">United Kingdom</option>
                        <option value="Afghanistan">Afghanistan</option>
                        <option value="Albania">Albania</option>                    
                      </select>

</form>
<p>{{count}}% completed</p>
</html>

脚本

<script>

var myapp = angular.module('myapp', []);

myapp.controller('profileController', function ($scope,$http) 
{
    $scope.count = 0;
    $scope.percentageCount = function()
    {
        $scope.count =0;

        if($scope.nameValue != null)
          $scope.count = $scope.count+20;
        if($scope.lnameValue != null)
          $scope.count = $scope.count+20;  
        if($scope.ageValue != null)
          $scope.count = $scope.count+20;
        if($scope.genderValue != null)
          $scope.count = $scope.count+20;   
        if($scope.countryValue != null)
          $scope.count = $scope.count+20;       

    }

});

</script>

这里我需要使用很多if条件。

在jquery中我们可以使用

执行此操作

$('input').on('change', function()

我如何在angularjs中做到这一点作为一种好的编码方式

提前谢谢。

Answer 1

不是尝试通过绑定事件侦听器来重新计算计数并将结果存储在作用域中，而只需将模板中的计数绑定到函数调用：

<p>{{ percentageCount() }}% completed</p>

myapp.controller('profileController', function ($scope,$http) {
    $scope.percentageCount = function() {
        var count = 0;

        if ($scope.nameValue != null)
          count += 20;
        if ($scope.lnameValue != null)
          count += 20;
        if($scope.ageValue != null)
          count += 20;
        if($scope.genderValue != null)
          count += 20; 
        if($scope.countryValue != null)
          count += 20;     

        return count;
    }
});

在每个摘要周期（每次触发某个事件并更改范围）时，如果结果已更改，angular将调用此函数并刷新页面中的值。但由于这个功能简单快速，不会造成任何问题。

如果每个属性的规则始终相同（增量100除以属性数），则可以重写上述函数，如下所示：

var props = ['nameValue', 'lnameValue', 'ageValue', 'genderValue', 'countryValue'];

$scope.percentageCount = function() {
        var count = 0;
        angular.forEach(props, function(prop) {
            if ($scope[prop]) {
                count += (100 / props.length);
            }
        });
        return count;
    }
});

Answer 2

Angular为所有基本DOM操作提供了一组指令。当从JQuery世界开始使用AngularJS时，始终搜索适当的指令并且从不使用JQuery是一个很好的规则。

在您的情况下，ng-change将执行与$('input').change()

类似的相同操作

Answer 3

不要将事件处理程序附加到输入，而是观察模型的更改。一次监视所有模型属性，因此如果有任何更改，您的处理程序只会在一组更改时被调用一次。

var props = ['nameValue', 'lnameValue', 'ageValue', 'genderValue', 'countryValue'];

$scope.$watchGroup(props, valuesChanged);

function valuesChanged() {
    var count = 0;

    props.forEach(function(prop) {
        if ($scope[prop] != null) {
            count += 20;
        }
    });

    $scope.count = count;
}

如何在angularjs中实现$（＆＃39;输入＆＃39;）on（＆＃39;更改＆＃39;，function（））

3 个答案: