Question

我尝试创建一个前端应用程序，向用户显示一个文本框，在该文本框中，他们可以列出他们通常在午餐时吃的以逗号分隔的项目。一旦输入，用户必须单击＆＃34;检查是否太多＆＃34;按钮。

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

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

＆＃13;

(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!"
      }
    };

  });

})();

＆＃13;

<!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>

＆＃13;

Answer 1

$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() }}

这是未经测试的，但类似的东西会让你更接近。

Answer 2

您展示的代码存在许多不同的问题。

没有在ng-click中调用函数 对于ng-click，必须像ng-click="statement()"一样调用函数。

<强>长度。在numberitems函数中：将其更改为lunchItems.length

其他if（0＆lt; $ scope.numberitems＆lt; 5）： 0这里没有区别

使用语句作为函数和值：创建一个函数来更新变量中的值并使用变量来显示它。

我还建议初始化变量，例如：

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

我已经弄清了我认为的预期结果：

click for fiddle

Answer 3

使用您的代码并进行一些更改。

＆＃13;

<!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>

＆＃13;

角度表达未被识别。程序无效

3 个答案: