角度表達未被識別。程序不能正常工作

我正在嘗試創建一個前端應用程序，向用戶顯示一個文本框，他們可以列出他們通常在午餐時間吃的逗號分隔的項目。一旦輸入，用戶必須點擊「檢查是否太多」按鈕。角度表達未被識別。程序不能正常工作

我是初學者，對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

角度表達未被識別。程序不能正常工作

回答

相關問題