Question

我是AngularJS的新手。验证名称时，我尝试通过AngularJS ng-bind设置跨度值。我已经尝试了很多方法但不幸的是它无法正常工作。

HTML：

<div class="modal fade" id="myModal" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true" ng-controller="modalCtrl as data">

    <input id="name" ng-model="data.name"
       type="text" ng-blur="validateName(this.data)" />
    <span ng-bind="data.name.errMsg"></span>

</div>

JavaScript：

$scope.validateName=function(obj){
    var name = obj.name;
    var regex = new RegExp("^[a-zA-Z0-9\/\@\&\%\*\$\>\<\\[\\]\,\(\)\_\'\;\ \:\\-\\.]+$");
    if(name != undefined && name != null && name.length < 3){
        obj.name.errMsg = "Please enter minimum 3 characters in Name";
        //$scope.name.errMsg = "Please enter minimum 3 characters in Name"
        // TypeError: Cannot set property 'errMsg' of undefined
    }
};

Answer 1

obj.name将是字符串而不是对象。您不能设置字符串类型的属性。您可以将obj设置如下。

obj = [{name:'name', errMsg:'error message here'}]

Answer 2

parallel --halt now,fail=1 ::: \
  "npm install --global bower ng-cli" \
  "cd $1 npm install" \
  "cd $2 bower install" && echo All is OK

Answer 3

您可以在下面的代码中尝试使用此代码，也请检查this plunker link以获取给定方案的有效示例。

模板：

<div class="modal fade" id="myModal" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true" ng-controller="modalCtrl as data">

    <input id="name" ng-model="data.name"
       type="text" ng-blur="validateName(this.data)" />
    <span ng-bind="data.errMsg"></span> // data.errMsg instead of data.name.errMsg

</div>


$scope.validateName=function(obj){
    var name = obj.name;
    var regex = new RegExp("^[a-zA-Z0-9\/\@\&\%\*\$\>\<\\[\\]\,\(\)\_\'\;\ \:\\-\\.]+$");
    if(name != undefined && name != null && name.length < 3){
        obj.errMsg = "Please enter minimum 3 characters in Name"; 
        //obj.errMsg instead of obj.name.errMsg
    }
};

控制器：

<body ng-controller="MainCtrl as data">
    <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <input id="name" ng-model="data.name" type="text" ng-blur="validateName(this.data)" /><br/>
        <span ng-bind="data.errMsg"></span>
    </div>
</body>

Answer 4

您需要在正确的作用域变量上定义errMsg。

尝试一下

angular.module("app",[])
.controller("modalCtrl",function(){
var ctrl = this;
ctrl.nameObj = {};
ctrl.nameObj.name= "sss";

ctrl.validateName=function(){
    var name = ctrl.nameObj.name;
    var regex = new RegExp("^[a-zA-Z0-9\/\@\&\%\*\$\>\<\\[\\]\,\(\)\_\'\;\ \:\\-\\.]+$");
    if(name != undefined && name != null && name.length < 3){
        ctrl.nameObj.errMsg = "Please enter minimum 3 characters in Name"
        // TypeError: Cannot set property 'errMsg' of undefined
    } else { ctrl.nameObj.errMsg = "";}
};

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="modalCtrl as data">

    <input id="name" ng-model="data.nameObj.name"
       type="text" ng-blur="data.validateName()" />
    <span ng-bind="data.nameObj.errMsg"></span>
    {{data.nameObj.errMsg}}

</div>

AngulaJS ng绑定不起作用-无法设置未定义的属性

4 个答案: