角度構文エラー

Question

新しい角度に。ここで何が間違っているのか見つけ出す問題がある。構文エラーがあるのがわかりますが、どうやって解決できないのでしょうか？ありがとう、助けてください。ここ は私のエラーです：ここで

Error: [$parse:syntax] http://errors.angularjs.org/1.6.4/$parse/syntax?p0=Express&p1=is%20unexpected%2C%20expecting%20%5B%7D%5D&p2=47&p3=prefixes%3D%7BVisa%3A%20'4'%2C%20MasterCard%3A'5'%2C%20American%20Express%3A'3'%2C%20Discover%3A'6'%7D&p4=Express%3A'3'%2C%20Discover%3A'6'%7D 

<div class="ng-scope" ng-app="edu_app" ng-controller="edu_ctrl" ng-init="prefixes={Visa: '4', MasterCard:'5', American Express:'3', Discover:'6'}" style="margin-bottom:25px;"> 

がHTMLである：

<div ng-app="edu_app" ng-controller="edu_ctrl" ng-init="prefixes={Visa: '4', MasterCard:'5', American Express:'3', Discover:'6'}"> 
    <div> 
     <div> 
      <img id="visa" src="images/visa-card-logo.png" ng-class="{'greyed' : prefixes.type !== 'Visa'}" /> 
     </div> 
     <div> 
      <img id="mastercard" src="images/master-card-logo.png" ng-class="{'greyed' : prefixes.type !== 'MasterCard'}" /> 
     </div> 
     <div> 
      <img id="amex" src="images/amex-card-logo.png" ng-class="{'greyed' : prefixes.type !== 'American Express'}" /> 
     </div> 
     <div> 
      <img id="discover" src="images/discover-card-logo.png" ng-class="{'greyed' : prefixes.type !== 'Discover'}" /> 
     </div> 
    </div> 
</div> 

Javascriptを：

angular.module('edu_app',[]).controller('edu_ctrl', function($scope) { 
     $scope.prefixes = {}; 
     $scope.ccNumberChnage = function() { 
      var ccType = $scope.prefixes.cards ? $scope.prefixes.cards.charAt(0) : ''; 
      switch(ccType) { 
       case '3': $scope.prefixes.type = 'American Express'; break; 
       case '4': $scope.prefixes.type = 'Visa'; break; 
       case '5': $scope.prefixes.type = 'MasterCard'; break; 
       case '6': $scope.prefixes.type = 'Discover'; break; 
       default: $scope.prefixes.type = null; break; 
      } 
     }; 

    }); 

Answer 1

ng-init内prefixes変数を宣言構文エラーがあります、あなたがプロパティ名を持っていますスペースは：American Expressです。

ng-init="prefixes={Visa: '4', MasterCard:'5', 'American Express':'3', Discover:'6'}" 

完全な作業例怒鳴る：そのためには、JavaScriptがそうのようなプロパティ名としてそれを認識できるようにアポストロフィでそれを囲む必要があります。あまりにも深く見ず

angular.module('edu_app', []).controller('edu_ctrl', function($scope) { 
 
    $scope.prefixes = {}; 
 
    $scope.ccNumberChnage = function() { 
 
    var ccType = $scope.prefixes.cards ? $scope.prefixes.cards.charAt(0) : ''; 
 
    switch (ccType) { 
 
     case '3': 
 
     $scope.prefixes.type = 'American Express'; 
 
     break; 
 
     case '4': 
 
     $scope.prefixes.type = 'Visa'; 
 
     break; 
 
     case '5': 
 
     $scope.prefixes.type = 'MasterCard'; 
 
     break; 
 
     case '6': 
 
     $scope.prefixes.type = 'Discover'; 
 
     break; 
 
     default: 
 
     $scope.prefixes.type = null; 
 
     break; 
 
    } 
 
    }; 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script> 
 
<div ng-app="edu_app" ng-controller="edu_ctrl" ng-init="prefixes={Visa: '4', MasterCard:'5', 'American Express':'3', Discover:'6'}"> 
 
    <div> 
 
    <div> 
 
     <img id="visa" src="images/visa-card-logo.png" ng-class="{'greyed' : prefixes.type !== 'Visa'}" /> 
 
    </div> 
 
    <div> 
 
     <img id="mastercard" src="images/master-card-logo.png" ng-class="{'greyed' : prefixes.type !== 'MasterCard'}" /> 
 
    </div> 
 
    <div> 
 
     <img id="amex" src="images/amex-card-logo.png" ng-class="{'greyed' : prefixes.type !== 'American Express'}" /> 
 
    </div> 
 
    <div> 
 
     <img id="discover" src="images/discover-card-logo.png" ng-class="{'greyed' : prefixes.type !== 'Discover'}" /> 
 
    </div> 
 
    </div> 
 
</div>