Angular JS式が評価されていない

私は簡単なAngular JSコードを書いています。私は初心者です。しかし、私の表現の一つは評価されていません。助けが必要。評価されたが、ボタンの上にあるとして表示さ取得されていない{{isHidden ? 'Show Available Colors' : 'Hide Available Colors'}} -Angular JS式が評価されていない

var myAppModule = angular.module('myAppModule', []); 
 

 
    myAppModule.controller('myController', function($scope){ 
 
\t  // Hide colors by default 
 
\t  $scope.isHidden = true; 
 
\t 
 
\t  // a function, placed into the scope, which 
 
\t  // can toggle the value of the isHidden variable 
 
\t  $scope.showHideColors = function() { 
 
\t  $scope.isHidden = !$scope.isHidden; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
    <html ng-app="myAppModule"> 
 
     <head> 
 
     <title>Angular JS</title> 
 
\t  <script src="js/angular.min.js"></script> 
 
     <script src="js/myAppModule.js"></script> 
 
\t  <style> 
 
\t \t  body { 
 
\t \t   font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica,  Arial,  sans-serif; 
 
\t \t  } 
 
\t \t  div { 
 
\t \t \t  margin: 20px; 
 
\t \t \t  padding: 20px; 
 
\t \t \t  font-size: 16px; 
 
\t \t \t  color:#ffffff; 
 
\t \t  } 
 
\t \t  #red { 
 
\t \t \t  background-color: red; 
 
\t \t  } 
 
\t \t  #green { 
 
\t \t \t  background-color: green; 
 
\t \t  } 
 
\t \t  #blue { 
 
\t \t \t  background-color: blue; 
 
\t \t  } 
 
\t \t  #purple { 
 
\t \t \t  background-color: purple; 
 
\t \t  } 
 
\t \t  #gray { 
 
\t \t \t  background-color: gray; 
 
\t \t  } 
 
\t \t  #olive { 
 
\t \t \t  background-color: olive; 
 
\t \t  } 
 
\t  </style> \t 
 
     </head> 
 
    
 
     <body ng-controller="myController"> 
 
\t \t  <h2>AngularJS Socks</h2> 
 
\t \t  <p>Keep warm this winter with our 100% wool, 100% cool, AngularJS socks!</p> 
 
\t \t 
 
\t \t  <button ng-click="showHideColors()" type="button"> 
 
\t \t \t  {{isHidden ? 'Show Available Colors' : 'Hide Available Colors'}} 
 
\t \t  </button> 
 
\t \t  <div id="red" ng-hide="isHidden">Red</div> 
 
\t \t  <div id="green" ng-hide="isHidden">Green</div> 
 
\t \t  <div id="blue" ng-hide="isHidden">Blue</div> 
 
\t \t  <div id="purple" ng-hide="isHidden">Purple</div> 
 
\t \t  <div id="gray" ng-hide="isHidden">Dark Slate Gray</div> 
 
\t \t  <div id="olive" ng-hide="isHidden">Olive</div> 
 
     </body> 
 
    </html>

表現 - 以下のコードをご確認ください。私が逃したものについての手がかりはありません。前もって感謝します。

出典

2016-11-30 Rohit

あなたの関数を閉じたhaventので、この

<button ng-if="isHidden" ng-click="showHideColors()" type="button">Show Available Colors</button> 

<button ng-if="!isHidden" ng-click="showHideColors()" type="button">Hide Available Colors</button>

出典

2016-11-30 15:23:51 Win

ありがとうございました。それは正しいです。それは私のために働いた。 :) – Rohit

-1

あなたがこの試すことができます：あなたは

myAppModule.controller('myController', function($scope){ 
    // Hide colors by default 
    $scope.isHidden = true; 

    // a function, placed into the scope, which 
    // can toggle the value of the isHidden variable 
    $scope.showHideColors = function() { 
    $scope.isHidden = !$scope.isHidden; 
}})

出典

2016-11-30 15:15:50

は、コードが閉じ括弧が不足していています。あなたはここで働くのデモを見ることができます - http://jsfiddle.net/me8j3zyc/

var app = angular.module('myAppModule', []); 

app.controller('myController', function($scope) { 

    $scope.isHidden = true; 

    // a function, placed into the scope, which 
    // can toggle the value of the isHidden variable 
    $scope.showHideColors = function() { 
    $scope.isHidden = !$scope.isHidden; 
    } // <- This is missing. 
});

出典

2016-11-30 15:22:26 Lewis

ありがとうございました。それは正しいです。それは私のために働いた。 :) – Rohit

あなたの表現は結構ですが、あなたはあなたのJSファイルに誤植があります

var myAppModule = angular.module('myAppModule', []); 

myAppModule.controller('myController', function($scope) { 
    // Hide colors by default 
    $scope.isHidden = true; 

    // a function, placed into the scope, which 
    // can toggle the value of the isHidden variable 
    $scope.showHideColors = function() { 
     $scope.isHidden = !$scope.isHidden; 
    } //MISSING 
});

出典

2016-11-30 15:24:10 Mistalis

ありがとうございます。それは正しいです。それは私のために働いた。 :) – Rohit

Angular JS式が評価されていない

答えて

関連する問題