用循环遍历数组
Angularjs Iterating through array with loop
嗨,我是Angularjs的新手,我不知道我在做什么。:)我需要能够在一个文本框中输入一个信用卡号码,然后循环通过找出什么样的信用卡正在使用,并显示该信用卡的图像。到目前为止,我在我的指令中有以下代码:
编辑
app.directive('myDirective', function () {
return {
restrict: 'E',
scope: {
cardNum: '=',
cardType: '='
},
template: '<input ng-model="cardNum"></input>',
replace: true,
link: function ($scope, elem, attr) {
scope.$watch('cardNum', function (val) {
var regMap = [
{ id: 'visa', reg: '^4[0-9]{12}(?:[0-9]{3})?$' },
{ id: 'mastercard', reg: '^5[1-5][0-9]{14}$' },
{ id: 'discover', reg: '^6(?:011|5[0-9]{2})[0-9]{12}$' },
{ id: 'amex', reg: '^3[47][0-9]{13}$' }
];
angular.forEach(regMap, function(e){
//The current element of the regMap sits in e which is an object `{id:, :reg}`
if(e.reg.test(val)) {
//In the above if you test if the val(which is the input value) is matching the regex `e.reg` and if there is a match you pass the id of the object to a scope variable which was sent into the directive.
scope.cardType = e.id
}
})
})
}
};
});
<div class="form-group">
<div class="row">
<div class="col-lg-8">
<label for="CCnum" class="control-label">{{ 'CC_NUMBER' | translate }}</label>
<input id="CCnum" name="CCnum" class="form-control" title="Number on the front of your card" required="" type="text" ng-model="crdNo">
<!--ve-credit-card-no="vm.ccType"-->
<ve-credit-cardno card-num="crdNo" card-type="crdTy"></ve-credit-cardno>
{{crdTy}}
<div class="error_msg" ng-show="ccform.CCnum.$error.required && submit">Please enter a credit card number</div>
</div>
<div class="col-lg-3">
<label for="ccimg" class="control-label"></label>
<span ng-show="crdTy == 'visa'">visa<img id="ccimg" class="img-responsive" src="../../Assets/img/visa.png" /></span>
<span ng-show="crdTy == 'mastercard'">mastercard<img id="ccimg" class="img-responsive" src="../../Assets/img/mastercard.png" /></span>
<span ng-show="crdTy == 'discover'">discover<img id="ccimg" class="img-responsive" src="../../Assets/img/discover.png" /></span>
<span ng-show="crdTy == 'discover'">amex<img id="ccimg" class="img-responsive" src="../../Assets/img/amex.png" /></span>
</div>
</div>
</div>
快速解决方案。如果你需要的话,我以后会改进的。
首先把你的html添加到一个指令模板中,如果现在还没有的话。
输入指令:
<input ng-model="cardNum">
指令:
app.directive('myDirective', function() {
return {
restrict: 'E',
template: '<input ng-model="cardNum"></input>',
replace: true,
link: function($scope, elem, attr) {
$scope.$watch('cardNum', function(val){
console.log($scope.cardNum)
})
}
};
});
现在你可以注意到,每次你在你的输入中输入一些东西,console.log
将打印这个值,只要取这个值并做你想做的事情。
看这里
更新让您久等了。
首先,通过使用正则表达式来检查卡片的类型:
var regMap = [
{ id: 'visa', reg: /^4[0-9]{12}(?:[0-9]{3})?$/ },
{ id: 'mastercard', reg: /^5[1-5][0-9]{14}$/ },
{ id: 'discover', reg: /^6(?:011|5[0-9]{2})[0-9]{12}$/},
{ id: 'amex', reg: /^3[47][0-9]{13}$/ }
];
您现在需要做的是检查您的输入是否匹配上述列表中的一个正则表达式。
scope.$watch('cardNum', function(val){
//The value of the input sits in `val`
angular.forEach(regMap, function(e){
//The current element of the regMap sits in e which is an object `{id:, :reg}`
if(e.reg.test(val)) {
//In the above if you test if the val(which is the input value) is matching the regex `e.reg` and if there is a match you pass the id of the object to a scope variable which was sent into the directive.
scope.cardType = e.id
}
})
})
上面的代码,正在观察cardNum模型,$watch('cardNum')
,每次cardNum
的值改变时,$watch
范围内的代码将运行。在作用域中有一个forEach循环,它获取每个正则表达式并测试新值。如果存在匹配,则将some字符串赋值给scope.cardType;
指令作用域:
scope: {
cardNum: '=',
cardType: '='
},
cardNum
,将具有输入的值。
cardType
,将是您的卡的类型。
<input ng-model="crdNo"></input>
<!--Notice how do you send the value of the input, and how you get the card type-->
<my-directive card-num="crdNo" card-type="crdTy"></my-directive>
{{crdTy}}
看看这是如何工作的,在这里
一旦你从crdTy
得到你的卡的类型,它将是一个字符串,你就可以在这里使用它们:
span ng-show="crdTy == 'visa'">visa<img id="ccimg" class="img-responsive" src="../../Assets/img/visa.png" /></span>
<span ng-show="crdTy == 'mastercard'">mastercard<img id="ccimg" class="img-responsive" src="../../Assets/img/mastercard.png" /></span>
<span ng-show="crdTy == 'discover'">discover<img id="ccimg" class="img-responsive" src="../../Assets/img/discover.png" /></span>
<span ng-show="crdTy == 'discover'">amex<img id="ccimg" class="img-responsive" src="../../Assets/img/amex.png" /></span>
相关文章:
- 循环遍历以数组为值的Javascript对象
- 如何遍历包含对象的数组-javascript
- JS.循环遍历多维数组,以计数元素在每列中的出现次数
- 根据PHP中数组的长度在Google Maps API中循环遍历标记
- 无法在javascript中循环遍历对象数组
- 如何使用jquery遍历具有动态添加元素的数组
- 我想遍历一个对象数组,我不想要任何重复项
- 如何遍历 JSON 对象以适合 JavaScript 数组
- 如何遍历 d3 中的值内部数组并添加相应的子元素
- Javascript 尝试遍历对象数组以显示其属性
- 使用jQuery循环遍历颜色数组
- javascript循环遍历列表项,并在数组中返回结果
- 循环遍历以数组作为值的对象的对象
- 遍历jQuery JSON对象数组
- 用javascript遍历映射中的数组
- 遍历嵌套的Javascript数组以创建路径
- 根据属性值创建多个对象数组,然后遍历每个数组
- 使用内部数组遍历数组并创建新对象 - AngularJS
- Jquery中的关联数组遍历每个元素
- Javascript - 使用数组遍历字段