角度用户输入计算器
[英]Angular user input calculator
问题描述
I would like to do a small aplication. 
我想做一个小应用。 I did it but my if statement doesn't work. 我做到了，但是我的if语句不起作用。 I will appreciate if somebody can tell me what is wrong. 如果有人能告诉我什么地方不对，我将不胜感激。 The application presents the user with a textbox where they can list comma-separated items. 该应用程序向用户显示一个文本框，他们可以在其中列出逗号分隔的项目。 If the number of items in the textbox is less than or equal to 3 (eg, 1, 2, or 3), a message should show up under to the textbox saying "Enjoy!". 如果文本框中的项目数小于或等于3（例如1、2或3），则应在文本框下方显示一条消息“ Enjoy！”。 If the number of items is greater than 3 (4, 5, and above), the message "Too much!". 如果项目数大于3（4、5和以上），则显示消息“太多！”。 To implement this behavior, I used the split method. 为了实现此行为，我使用了split方法。 If the textbox is empty and the user clicks the "Check If Too Much" button, the message "Please enter data first" should show up. 如果文本框为空，并且用户单击“检查太多”按钮，则将显示消息“请先输入数据”。
Here is my code: 这是我的代码：
(function () { 'use strict'; var app = angular.module('LunchCheck', []); app.controller('LunchCheckController', LunchCheckController); LunchCheckController.$inject = ['$scope']; function LunchCheckController($scope) { $scope.name; $scope.message; $scope.displayNumeric = function () { console.log($scope.name); console.log($scope.name.length); var lungimea = $scope.name.length; console.log(lungimea); if (lungimea == null) { $scope.message = "Please enter data first"; } else { $scope.name = $scope.name.split(" "); console.log($scope.name); if ($scope.name.length = 3) { $scope.message = "Enjoy!"; } else { $scope.message = "Too much!"; }; }; }; }; })();
<!doctype html> <html ng-app="LunchCheck"> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script> <script src="app.js"></script> </head> <body> <div ng-controller="LunchCheckController"> <form> <input type="text" ng-model="name" placeholder="Check it!" /> <button ng-click="displayNumeric()">Check If Too Much</button> </form> {{message}} </div> </body> </html>
2 个解决方案
解决方案1
0 2017-11-20 10:38:00
You are missing the part where you split the comma separated items from the string. 您缺少将字符串中的逗号分隔项目分开的部分。 Using $scope.name.length will return only the count of characters of the input. 使用$scope.name.length将仅返回输入的字符数。
var lungimea = $scope.name.length;
console.log(lungimea);
if (lungimea == null)
{
$scope.message = "Please enter data first";
}
else
{
$items = $scope.name.split(",");
$scope.message = $items.length <= 3? 'Enjoy!' : 'Too much!';
};
Will give you the amount of items separated by comma. 将为您提供用逗号分隔的项目数量。
Also try to stored the items in a different variable instead of replacing the $scope.name one (remember that you have a ng-model listening to that variable) 也尝试将项目存储在另一个变量中，而不是替换$scope.name （记住，您有一个ng-model监听该变量）
解决方案2
0 已采纳 2017-11-20 10:53:56
From the example you gave above, I am assuming you want space-separated words, you can achieve this behavior with the below example where I have introduced a local variable to avoid updating the scope variable which is bound to the input. 从上面给出的示例中，我假设您要用空格分隔的单词，可以通过以下示例实现此行为，在下面的示例中，我引入了局部变量以避免更新绑定到输入的作用域变量。
(function () { 'use strict'; var app = angular.module('LunchCheck', []); app.controller('LunchCheckController', LunchCheckController); LunchCheckController.$inject = ['$scope']; function LunchCheckController($scope) { $scope.name; $scope.message; $scope.displayNumeric = function () { if (!$scope.name) { $scope.message = "Please enter data first"; } else { let nameSplit = $scope.name.split(" "); if (nameSplit.length <= 3) { $scope.message = "Enjoy!"; } else { $scope.message = "Too much!"; }; }; }; }; })();
<!doctype html> <html ng-app="LunchCheck"> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script> <script src="app.js"></script> </head> <body> <div ng-controller="LunchCheckController"> <form> <input type="text" ng-model="name" placeholder="Check it!" /> <button ng-click="displayNumeric()">Check If Too Much</button> </form> {{message}} </div> </body> </html>
I hope this helps. 我希望这有帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.