角度语法错误

Question

Angular 新手。在找出问题所在时遇到问题。我看到有语法错误，但我不知道怎么做？请指教，谢谢。 这是我的错误：

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。因此，您需要用撇号将其括起来，以便 javascript 可以将其识别为属性名称，如下所示：

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

下面的完整工作示例。

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>