+ Start a Discussion
deepak kumawatdeepak kumawat 

Anguler Js

Hi,
I am facing  this problem :  i stuck on this last one day plz suggest me plz ...

 "Uncaught Error: [$injector:modulerr]"
 
JethaJetha
Could you please post code over here. In that case we can help you out....
deepak kumawatdeepak kumawat
Hey Jetha SF,
 
Here  this is code : - 


Code :  



<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>

<body>

<div ng-controller="SelectOptGroupController" class="md-padding"  ng-app="MyApp">
  <div>
    <h1 class="md-title">Pick your pizza below</h1>
    <div layout="row"><br>

      <md-input-container style="margin-right: 10px;">
        <label>Size</label>
        <md-select ng-model="size">
          <md-option ng-repeat="size in sizes" value="{{size}}">{{size}}</md-option>
        </md-select>
      </md-input-container>
      <md-input-container>
        <label>Topping</label>
        <md-select ng-model="selectedToppings" multiple>
          <md-optgroup label="Meats">
            <md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'meat' }">{{topping.name}}</md-option>
          </md-optgroup>
          <md-optgroup label="Veggies">
            <md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'veg' }">{{topping.name}}</md-option>
          </md-optgroup>
        </md-select>
      </md-input-container>
    </div>
    <p ng-if="selectedToppings">You ordered a {{size.toLowerCase()}} pizza with
    {{printSelectedToppings()}}.</p>
  </div>
</div>


<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js" ></script>
<script>

var app = angular.module('MyApp',['ngMaterial','ngRoute','ngMessages', 'material.svgAssetsCache']);
   app.controller('SelectOptGroupController', function($scope) {
      $scope.sizes = [
          "small (12-inch)",
          "medium (14-inch)",
          "large (16-inch)",
          "insane (42-inch)"
      ];
      $scope.toppings = [
        { category: 'meat', name: 'Pepperoni' },
        { category: 'meat', name: 'Sausage' },
        { category: 'meat', name: 'Ground Beef' },
        { category: 'meat', name: 'Bacon' },
        { category: 'veg', name: 'Mushrooms' },
        { category: 'veg', name: 'Onion' },
        { category: 'veg', name: 'Green Pepper' },
        { category: 'veg', name: 'Green Olives' }
      ];
      $scope.selectedToppings = [];
      $scope.printSelectedToppings = function printSelectedToppings() {
        var numberOfToppings = this.selectedToppings.length;

        // If there is more than one topping, we add an 'and'
        // to be gramatically correct. If there are 3+ toppings
        // we also add an oxford comma.
        if (numberOfToppings > 1) {
          var needsOxfordComma = numberOfToppings > 2;
          var lastToppingConjunction = (needsOxfordComma ? ',' : '') + ' and ';
          var lastTopping = lastToppingConjunction +
              this.selectedToppings[this.selectedToppings.length - 1];
          return this.selectedToppings.slice(0, -1).join(', ') + lastTopping;
        }

        return this.selectedToppings.join('');
      }
    });
</script>
</body>
</html>