角度表达未被识别。程序不能正常工作

我正在尝试创建一个前端应用程序，向用户显示一个文本框，他们可以列出他们通常在午餐时间吃的逗号分隔的项目。一旦输入，用户必须点击“检查是否太多”按钮。角度表达未被识别。程序不能正常工作

我是初学者，对Angular还没有很好的把握。我的程序不起作用。首先，当我在HTML中插入它们时，表达式不被识别。不知道为什么。

我认为我的指令的位置可能有问题，但不是很确定，真的可以使用一些帮助。

(function() { 
 
'use-strict'; 
 

 
angular.module('lunchCheck', []) 
 
    .controller('LunchCheckController', function ($scope) { 
 

 

 
    $scope.numberitems = function() { 
 
     var itemstring = $scope.items 
 
     var lunchItems = itemstring.split(",") 
 
     return length.lunchItems 
 
    }; 
 

 
    $scope.statement = function() { 
 
     if ($scope.numberitems==0) { 
 
     return "Please enter data first!" 
 
     } 
 
     else if (0<$scope.numberitems<5) { 
 
     return "Enjoy!" 
 
     } 
 
     else if ($scope.numberitems>4) { 
 
     return "Too much!" 
 
     } 
 
    }; 
 

 
    }); 
 

 
})();

<!doctype html> 
 
<html lang="en" ng-app="lunchCheck"> 
 
    <head> 
 
    <title>Lunch Checker</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="styles/bootstrap.min.css"> 
 
    <style> 
 
     .message { font-size: 1.3em; font-weight: bold; } 
 
    </style> 
 
    </head> 
 
<body> 
 
    <div class="container" ng-controller="LunchCheckController"> 
 
    <h1>Lunch Checker</h1> 
 

 
     <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="items"> 
 
     </div> 
 

 
     <div class="form-group"> 
 
      <button 
 
      class="btn btn-default" 
 
      ng-click="statement">Check If Too Much</button> 
 
     </div> 
 

 
     <div class="form-group message" ng-click="statement"> 
 
      {{statement}} 
 
     </div> 
 
    </div> 
 

 
</body> 
 
</html>

来源

2016-12-06 Paul

哪里是'在页面上angular.js'参考？ –

语句是一个函数，所以你需要使用它作为函数'（）' – Nilesh

两个$scope.numberitems和$scope.statement被定义为函数。您需要执行这些功能才能获得结果。首先，拨打numberitems函数以获得$scope.statement内的计数。

$scope.statement = function() { 
    var numberOfItems = $scope.numberitems() 

    if (numberOfItems===0) { 
    return "Please enter data first!" 
    } 
    else if (numberOfItems > 0 && numberOfItems < 5) { 
    return "Enjoy!" 
    } 
    else if (numberOfItems > 4) { 
    return "Too much!" 
    } 
};

然后，在您的视图中，调用该函数。

{{ statement() }}

这是未经测试，但这样的事情应该让你更接近。

来源

2016-12-06 16:45:03 Hacknightly

您显示的代码有很多不同的问题。

在NG-点击不调用功效： 为ng-click，该机能的研究必须调用像ng-click="statement()"。

长度。在numberitems功能：将其更改为lunchItems.length

否则，如果（0 < $ scope.numberitems < 5）：0这里没有什么区别使用语句，函数和值

：创建一个函数更新变量内的值并使用该变量来显示它。

我也建议初始化变量，如：

.controller('LunchCheckController', function ($scope) { 
    $scope.statement = ''; 
    $scope.items = '';`

我做了一个捣鼓什么，我应该是预期的结果：

click for fiddle

来源

2016-12-06 17:01:12 tpsilva

使用您的代码并做了一些更改。

<!doctype html> 
 
<html lang="en" ng-app="lunchCheck"> 
 

 
<head> 
 
    <title>Lunch Checker</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="styles/bootstrap.min.css"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.js"></script> 
 
    <style> 
 
    .message { 
 
     font-size: 1.3em; 
 
     font-weight: bold; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="container" ng-controller="LunchCheckController"> 
 
    <h1>Lunch Checker</h1> 
 

 
    <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="items"> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <button class="btn btn-default" ng-click="statement()">Check If Too Much</button> 
 
    </div> 
 

 
    <div class="form-group message"> 
 
     {{ istoomuch }} 
 
    </div> 
 
    </div> 
 
    <script> 
 
    (function() { 
 
     'use-strict'; 
 

 
     angular.module('lunchCheck', []) 
 
     .controller('LunchCheckController', function($scope) { 
 
      $scope.istoomuch = ''; 
 

 
      $scope.numberitems = function() { 
 
      if ($scope.items) { 
 
       var itemstring = $scope.items 
 
       var lunchItems = itemstring.split(",") 
 
       return lunchItems.length; 
 
      } else { 
 
       return 0; 
 
      } 
 
      }; 
 

 
      $scope.statement = function() { 
 
      var totalitems = $scope.numberitems(); 
 
      console.log(totalitems); 
 
      if (totalitems === 0) { 
 
       $scope.istoomuch = "Please enter data first!" 
 
      } else if (totalitems < 5) { 
 
       $scope.istoomuch = "Enjoy!" 
 
      } else if (totalitems > 4) { 
 
       $scope.istoomuch = "Too much!" 
 
      } 
 
      }; 
 

 
     }); 
 

 
    })(); 
 
    </script> 
 

 
</body> 
 

 
</html>

来源

2016-12-06 17:52:27 Nilesh

角度表达未被识别。程序不能正常工作

回答

相关问题