[Angular/Javascript] campi select a cascata

**gizmu** · 09-02-2016, 19:08

Salve a tutti, premetto che sono un hobbista alle prime armi, quindi non crocefiggetemi se chiudo una cosa stupida, ma non riesco ad andare avanti con il mio "esperimento"...
Il problema per cui vi chiedo aiuto e' il seguente: innanzitutto andate qui http://plnkr.co/edit/X3AHzhv2eYpcsQtvIYZb?p=preview e vedrete un pezzettino del codice incriminato. Non devo aprire un ristorante on-line ma concettualmente fa lo stesso.
Come vedete c'e' una dropdown con dei menu suddivisi per tipo di cucina. Sotto c'e' un'altra dropdown in cui si puo' selezionare uno specifico piatto ed a seconda della scelta dinamicamente vengono create le possibili opzioni per quel piatto.
Ora dovrei riuscire a "collegare" le due cose, ovvero a seconda del menu scelto devono essere visualizzati alcuni piatti di default, che poi l'utente puo' variare, o aggiugere, togliere etc.
Ad es. se guardate in app.js vedrete che scegliendo il menu "Margherita" i piatti di default da proporre sono Pizza, Salad e Softdrink. Dunque non appena l'utente sceglie quel menu nella prima dropdown, sotto dovrebbero comparire i tre piatti in questione, ognuno con le sue opzioni.
Come si puo' fare usando solo Angular (o "vanilla" Javascript all'interno del controller) ?
Ho provato e riprovato ma nulla che funzioni...

**ciro78** · 09-02-2016, 19:14

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.

**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/

**ciro78** · 10-02-2016, 00:19

bene per il codice ma usa il tag code. Ti consiglio di leggere il regolamento prima di continuare ad usare il forum.
ci sono molte informazioni, come appunto l'uso del tag code, che migliorano la fruizione dello stesso sia per te che per le persone che debbono aiutarti.

Discussione: [Angular/Javascript] campi select a cascata

Strumenti discussione

Ricerca discussione

Visualizza

[Angular/Javascript] campi select a cascata

Permessi di invio