午餐检查员

Question

当我点击按钮而没有在输入字段中输入任何内容时，我收到此错误。我看到这是因为命名约定为＆＃34; lunchCtrl.iform.inputText＆＃34;。当我用它作为＆＃34; lunchCtrl.inputText＆＃34;或者只是＆＃34; inputText＆＃34;在控制器和HTML中它的运行良好，没有错误的空值onbutton click。如果我输入任何文字并单击按钮就可以了。

任何人都可以帮我解决这里出错的问题。我已将代码附加在以下jsfiddle [here] [1]中。请帮我找到原因。

https://jsfiddle.net/29bmy95j/

这里的代码：的的index.html

午餐检查员

     <div class="form-group">
         <input id="lunch-menu" type="text"
         placeholder="list comma separated dishes you usually have for lunch"
         class="form-control" ng-model="lunchCtrl.iform.inputText">
     </div>
     <div class="form-group">
         <button class="btn btn-default" ng-click="checkTooMuch()">Check If Too Much</button>
     </div>
     <div class="form-group message">
       <!-- Your message can go here. -->
     </div>
     Entered values::{{lunchCtrl.iform.inputText}}
     <p ng-bind="errorMsg" style="color:red"></p>

App.js：

var app=angular.module('LunchCheck', []);
app.controller('LunchCheckController', ["$scope",function($scope){
//function for checkTooMuch() ng-click event
$scope.checkTooMuch=function(){

    var inputfieldVal=$scope.lunchCtrl.iform.inputText;
    $scope.inputfieldValScope=inputfieldVal;
    var array=inputfieldVal.split(',');
    //$scope.array=array;
    var arrLen=array.length;
    if(arrLen > 3){$scope.errorMsg="Too much!";}
    else{$scope.errorMsg="Enjoy!";}
}
}]);

error Image

Answer 1

由于未定义$scope.lunchCtrl.iform，因此，当您在文本字段$scope.lunchCtrl.iform.inputText中输入任何内容时，最初会触发错误。

$scope.checkTooMuch=function(){

    var inputfieldVal=$scope.lunchCtrl.iform.inputText;//error

所以修复将是

选项1

写一张支票并避免：

$scope.checkTooMuch=function(){
    if (!$scope.lunchCtrl.iform.inputText){
       return;
    }

    ...your code

选项2

在控制器

中定义您的变量，如下所示

app.controller('LunchCheckController', ["$scope",function($scope){
    //var v=$scope.inputText='';
    this.iform = {inputText:""};
    ...

工作代码here

TypeError：无法读取属性＆＃39; inputText＆＃39;由于我使用的命名约定未定义，如＆＃34; lunchCtrl.iform.inputText＆＃34;

午餐检查员

1 个答案: