我需要使用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中做到这一点作为编码的好方法
先感谢您。
最佳答案
不必每次通过绑定事件侦听器而发生任何更改来尝试重新计算计数并将结果存储在范围中，只需将模板中的计数绑定到函数调用即可：
<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;
}
});
关于javascript - 我如何在angularjs中实现$('input')。on('change'，function()，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31692098/