角の中括弧が機能しないのはなぜですか？

-1

私の中括弧は中括弧で表示されていますが、何が間違っているのか分かりませんでした。私はすべてをやりました...コントローラを使って入力ボックスを操作すると動作します。しかし、私は私のブラウザ上の入力ボックスにテキストをsumbitとき、それは...角の中括弧が機能しないのはなぜですか？

何もしない、私は私のモジュールを作成する場所です：

'use strict'; 
var foodApp=angular.module('foodApp', []);

これは私のhtmlです：

<script src="/lib/angular/angular.js"></script> 

<!DOCTYPE html> 

<html lang="en-us" > 
<head> 
<meta charset="utf-8"> 
<title>Food App</title> 
</head> 

<body> 
<div ng-controller="foodController" ng-app="foodApp"> 
    <input type="text" ng-model="foods"/> 
    <input type="submit" value="Healthy Lunch?" /> 
    <br /> 
    <br /> 

    <h4>{{outcome}}</h4> 

     {{foods}} 
</div> 
<script src="/js/food.js"></script> 
<script src="/js/controllers/foodController.js"></script> 
</body> 
</html>

これは私のコントローラのページです：

foodApp.controller('foodController', function($scope) 
{ 

var foods = $scope.foods; 
$scope.outcome=foods; 
var foodsArray=foods.split(','); 

if(foodsArray.length<=4) 
$scope.outcome="Bon Appetit!"; 

else if(foodsArray.length<=7) 
$scope.outcome="Pig!"; 

else 
$scope.outcome="One at a time, your scale is going to shout!!"; 
});

出典

2017-03-19 Hye Shusho

角度フレームワークを含めるには、 –

などの情報を追加できますか？エラーメッセージはありますか？ 'foodApp'モジュールを作成する場所にコードを含めることができますか？現時点では、あなたの問題を解決するのに十分な情報がありません。コントローラーコードが期待通りに機能していない可能性がありますが、それはまったく別の問題です。 –

問題は、あなたのコントローラに実際にあります。あなたのコントローラにあるコードは、コントローラが構築されたときに一度だけ実行されます。そのため、変数foodsは未定義です（$scope.foodsも未定義です）。後で2行の場合、foods.split(..)を実行しようとしますが、未定義であるため例外がスローされ、アプリケーションは失敗します。これはブラウザのデベロッパーコンソールにエラーとして表示されます。

これを修正するには、コントローラコードを完全にリファクタリングする必要があります。

foodApp.controller('foodController', function($scope) 
{ 
    $scope.handleFoodChange = function() { 

     $scope.outcome = $scope.foods; 
     if($scope.foods){ 
      var foodsArray = $scope.foods.split(','); 

      if(foodsArray.length<=4) 
       $scope.outcome = "Bon Appetit!"; 
      else if(foodsArray.length<=7) 
       $scope.outcome = "Pig!"; 
      else 
       $scope.outcome = "One at a time, your scale is going to shout!!"; 
     } 
    } 
});

とあなたのビューで、あなたがこれにあなたの入力を変更する必要があります。

<input type="text" ng-model="foods" ng-change="handleFoodChange()" />

期待通りにアプリケーションを動作させる必要があります。今、入力フィールドを変更するたびに、関数handleFoodChangeが呼び出され、変数$scope.outcomeの値を設定するロジックが処理されます。

Here's a Plunker showing it working

出典

2017-03-19 20:30:06

ありがとうございます。私は問題を理解しているかどうかはわかりません。コントローラ内のすべてに$ scopeを付けるはずですが、変数を作成できませんか？なぜ私の$ scope.foodsが未定義であるのか分からないのですが、入力ボックスに何もないので空の文字列ではないでしょうか？ –

変数をうまく使うことができます。 $スコープ。食品が定義されていないのは、コントローラは実際にはアプリケーション（コンストラクタ）であり、アプリケーションがブートストラップするときに一度だけ呼び出されるからです。それはユーザーが何か入力する機会がある前です。つまり、あなたの行 'var foods = $ scope.foods'（そしてあなたのコードの残りの部分）はその1回だけ呼び出されます。そのため、代わりにコールバック関数を作成するので、コードをオンデマンドで呼び出すことができます。私は角度についての良いチュートリアルを見つけ、それに密接に従うことをお勧めします。角度は非常に急な学習曲線を持つことができ、これは基本的なものに過ぎません。 –

角の中括弧が機能しないのはなぜですか？

答えて

関連する問題