[Angular/Javascript] campi select a cascata

**gizmu** · 09-02-2016, 20:58

Originariamente inviata da ciro78

Ciao gizmu,
benvenuto sul forum.

Da regolamento le discussioni con titolo poco chiaro vengono chiusi. Questa volta ho corretto io. La prossima lo chiudo.
Consiglio: nessuno si prende la briga di scaricare codice da altrove. Posta quello che hai fatto e dicci dove ci sono gli errori.

Grazie per la correzione. Per quanto riguarda il codice provvedo qui anche se mi sembra piu' pratico guardare su plnkr piuttosto che lenzuolate di codice nel forum. Ed in piu' uno vede subito l'anteprima.
Comunque: errori non ce ne sono nel senso che non riesco ad andare avanti. L'errore e' insomma che non succede proprio nulla !

Contenuto index.html:

codice:

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="style.css" rel="stylesheet" />
  <script data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js" data-require="angular.js@1.4.x"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div>
    <label>Type of Menu:</label>
      <select ng-model="selectedToM"
        ng-options="menu.ToM group by menu.ToC for menu in menus">
      </select><br>
    
    <h3>Personalize Your Menu</h3>
    <label>Course: </label>
      <select ng-model="SelectedCourse" 
        ng-options="course.Type for course in courses">
        <option value="">-- choose an option --</option>
      </select>

    <div ng-repeat="Characteristic in SelectedCourse.Characteristics">
      {{Characteristic.Label}}:
      <select ng-model="SelectedCharacteristic" 
        ng-options="option.OptItem for option in Characteristic.Options">
      </select>
    </div>
  </div>


</body>
</html>

Contenuto app.js:

codice:

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

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

  $scope.menus = [{
    ToC: 'American',
    ToM: 'McMenu',
    courses: []
  }, {
    ToC: 'American',
    ToM: 'Easy',
    courses: []
  }, {
    ToC: 'Italian',
    ToM: 'Margherita',
    courses: ['Pizza', 'Salad', 'Softdrink']
  }, {
    ToC: 'Chinese',
    ToM: 'McNoodle',
    courses: []
  }, ];

  $scope.courses = [{
      "Type": "Pasta",
      "Ppu": 4,
      "Characteristics": [{
        "Label": "Variant",
        "Options": [{
          "OptItem": "Lasagne",
          "addppu": 2
        }, {
          "OptItem": "Tortellini",
          "addppu": 1.5
        }, {
          "OptItem": "Gnocchi",
          "addppu": 1
        }, {
          "OptItem": "Spaghetti",
          "addppu": 0
        }, {
          "OptItem": "Cannelloni",
          "addppu": 2
        }],
      }, {
        "Label": "Size",
        "Options": [{
          "OptItem": "Normal",
          "addppu": 0
        }, {
          "OptItem": "King size",
          "addppu": 1
        }],
      }]
    }, {
      "Type": "Pizza",
      "Ppu": 4,
      "Characteristics": [{
        "Label": "Variant",
        "Options": [{
          "OptItem": "Margherita",
          "addppu": 0
        }, {
          "OptItem": "Napoli",
          "addppu": 1
        }, {
          "OptItem": "Funghi",
          "addppu": 1
        }, {
          "OptItem": "Prosciutto",
          "addppu": 0.5
        }, {
          "OptItem": "Hawaii",
          "addppu": 2
        }],
      }, {
        "Label": "Size",
        "Options": [{
          "OptItem": "Normal",
          "addppu": 0
        }, {
          "OptItem": "King size",
          "addppu": 1
        }],
      }]
    }, {
      "Type": "Salad",
      "Ppu": 2.5,
      "Characteristics": [{
        "Label": "Dressing",
        "Options": [{
          "OptItem": "None",
          "addppu": 0
        }, {
          "OptItem": "Italian",
          "addppu": 1
        }, {
          "OptItem": "French",
          "addppu": 1
        }],
      }, {
        "Label": "Size",
        "Options": [{
          "OptItem": "Small",
          "addppu": 0
        }, {
          "OptItem": "Medium",
          "addppu": 1
        }, {
          "OptItem": "Large",
          "addppu": 1.5
        }],
      }]
    }, {
      "Type": "Softdrink",
      "Ppu": 3,
      "Characteristics": [{
        "Label": "Type",
        "Options": [{
          "OptItem": "Coca-Cola",
          "addppu": 0
        }, {
          "OptItem": "Coca-Cola Light",
          "addppu": 0.5
        }, {
          "OptItem": "Fanta",
          "addppu": 0
        }, {
          "OptItem": "Sprite",
          "addppu": 0
        }],
      }]
    }


  ];
  
  
});

Anteprima: http://run.plnkr.co/90DAHHCuo5nlzjvq/

Discussione: [Angular/Javascript] campi select a cascata

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione discussione

Permessi di invio