Javascript Angularjs使用循环遍历数组

嗨，我是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>

app.directive（'myDirective'，函数（）{
返回{
限制：'E'，
范围：{
cardNum:“=”，
卡片类型：'='
},
模板：“”，
替换：正确，
链接：函数（$scope、elem、attr）{
范围$watch（'cardNum'，函数（val）{
var regMap=[
{id:'visa'，reg:'^4[0-9]{12}（？[0-9]{3}）？$'}，
{id:'万事达卡'，注册号：'^5[1-5][0-9]{14}$'}，
{id:'discover'，reg:'^6（？：011 | 5[0-9]{2}[0-9]{12}$'}，
{id:'美国运通'，注册号：'^3[47][0-9]{13}$'}
];
forEach（regMap，函数（e）{
//regMap的当前元素位于e中，它是一个对象`{id:，：reg}`
if（电子注册测试（val））{
//在上面的示例中，如果测试val（即输入值）是否与regex`e.reg`匹配，并且如果存在匹配项，则将对象的id传递给发送到指令中的范围变量。
scope.cardType=e.id
}
})
})
}
};
});    
{{'CC_NUMBER'| translate}}
{{crdTy}}
请输入信用卡号码
签证
万事达卡
发现
美国运股票交易所

快速解决方案。如果你愿意的话，我以后会改进的

首先将html添加到指令模板中，如果它目前不在那里

templete指令中的输入：

<input ng-model="cardNum">

您现在需要做的是检查您的输入是否与上面列表中的一个正则表达式匹配

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循环，它接受每个正则表达式并测试新值。如果存在匹配项，则将某个字符串分配给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}}

---

是否要使用element.bind？或者你不介意观察者吗？@alexsmn我不介意使用任何能让它工作的东西。我和Angular只工作了两周。我真的迷路了，我不太明白。我不确定如何在循环中检查信用卡号码。我添加了完整的指令，以便您可以看到我在做什么。等待过程中没有问题。谢谢你帮我。我修改了我的代码以匹配你的，但它仍然不起作用。你能看出我做错了什么吗；有关angular js教程，请查看youtube.com。谢谢您的帮助！

scope: {
  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}}

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>