AngularJS: Aktualisierung der Tabelleninhalte von Wählen Sie die Option

Derzeit versuche ich, AngularJS und einzelne Seite Anwendungen besser kennen zu lernen. Ich habe das Gefühl, dass ich Fortschritte mache, was ich als ermutigend empfinde, da ich WPF relativ verwirrend fand.AngularJS: Aktualisierung der Tabelleninhalte von Wählen Sie die Option

Allerdings habe ich das Gefühl, dass ich ein schwerwiegendes Missverständnis darüber habe, was AngularJS tun soll. Um meine Frage einfacher zu formulieren, habe ich eine einfache Beispiel-Website erstellt, damit ich üben kann.

Die Website ist wie ein Menü für Sodaprodukte formatiert, wo der Benutzer verschiedene Anbieter auswählen kann, und dann die verfügbaren Größen, um den Preis des Produkts anzuzeigen. Dies ist zum Beispiel einfach und die Preise und Größen (IE, Daten auf der Webseite angezeigt) sind nicht korrekt. Was richtig ist, ist meine Methode und das Format zum Anzeigen solcher Informationen.

Mein Problem ist, dass ich nicht scheinen kann, um das "selectedVendor" ng-Modell des Bereichs von meiner Vorlage URL (oder zumindest nicht "traditionell" I. E., einfach durch Eingabe des Namens) zugreifen. Dies unterbricht meinen Code, da ich die Liste der verfügbaren Größen von dem ausgewählten Anbieter abrufen muss.

Ich sah mir einige andere ähnliche Fragen an, aber die Antworten schienen alle darauf hinzuweisen, dass die ng-Repeat-Option die beleidigende Partei war. Entschuldigung, wenn dies ein Duplikat ist.

Hier ist mein Code:

index.html:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Menu - Beverages</title> 
     <script src="http://code.angularjs.org/1.2.13/angular.js"></script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script> 
     <script src="app.js"></script> 
    </head> 
    <body ng-app="routerApp"> 
     <div id="main"> 
      <div ui-view></div> 
     </div> 
    </body> 
</html>

app.js:

var routerApp = angular.module('routerApp', ['ui.router']).run(['$rootScope', '$state', function($rootScope, $state){$rootScope.$state = $state;}]); 

routerApp.config(function($stateProvider, $urlRouterProvider){ 
    $urlRouterProvider.otherwise('/home') 
    $stateProvider 

    .state('home',{ 
     url: '/home', 
     templateUrl: 'beverages_home.html', 
     controller: 'beveragesController' 
    }) 
}) 
routerApp.controller('beveragesController', function($scope){ 
    $scope.vendors=[ 
     { 
      Name: 'Pepsi-Cola', 
      Sizes:{ 
       Small:{ 
        Size:'8oz', 
        Price:'0.50' 
       }, 
       Medium:{ 
        Size:'16oz', 
        Price:'1.50' 
       }, 
       Large:{ 
        Size:'24oz', 
        Price:'2.50' 
       } 
      } 
     }, 
     { 
      Name: 'Coke', 
      Sizes:{ 
       Small:{ 
        Size:'Teaspoon', 
        Price:'4.50' 
       }, 
       Medium:{ 
        Size:'Tablespoon', 
        Price:'8.50' 
       }, 
       Large:{ 
        Size:'Quart', 
        Price:'25.50' 
       } 
      } 
     }, 
     { 
      Name: 'A&W', 
      Sizes:{ 
       Small:{ 
        Size:'Half Gallon', 
        Price:'0.25' 
       }, 
       Medium:{ 
        Size:'1 Liter', 
        Price:'1.00' 
       }, 
       Large:{ 
        Size:'2 Liter', 
        Price:'1.25' 
       } 
      } 
     } 
    ] 
    $scope.units=[ 'Dollars', 'Euro', 'Yen' 
    ] 
})

beverages_home.html:

<table> 
    <tr> 
     <th>Vendor</th> 
     <th>Size</th> 
     <th>Price</th> 
    </tr> 
    <tr> 
     <td><select ng-model="selectedVendor" ng-options="vendor as vendor.Name for vendor in vendors" ng-init="selectedVendor = vendors[0]"></select></td> 
     <td><select ng-model="selectedSize" ng-options="size as size.Size for size in selectedVendor.Sizes" ng-init="selectedSize = vendors[0].Sizes[0]"></select></td> 
     <td><select ng-model="selectedUnits" ng-options="unit for unit in units" ng-init="selectedUnits = units[0]"></select></td> 
    </tr> 
    <tr> 
     <td>{{selectedVendor.Name}}</td> 
     <td>{{selectedSize.Size}}</td> 
     <td>{{selectedSize.Price}} {{selectedUnits}}</td> 
    </tr> 
</table>

Derzeit habe ich Meine Webseite kann zwischen dem Verkauf wählen ors und Preiseinheiten. Ich bin jedoch nicht in der Lage, eine Größe zu sehen oder auszuwählen, weshalb das Preisfeld niemals gefüllt wird. Kann mir jemand in die richtige Richtung zeigen? Es ist mir egal, ob ich irgendetwas umstrukturieren muss, ich möchte nur den richtigen Weg oder den saubersten Weg kennenlernen, der zu der meisten Organisation und Skalierbarkeit führt.

Vielen Dank im Voraus!

Quelle

2016-09-07 Tyler Gubala

ich nicht. Sollte ich? Ich dachte, dass die Controller-Direktive in der .State ('home', { URL: '/ home', templateUrl: 'Getränke_Home.html', Controller: 'Getränke-Controller' }) –

Sorry, immer noch gewöhnungsbedürftig zum Wagenrücklauf im Kommentarbereich mit dem Kommentar. Mein Fehler! –

ja. Ich sehe jetzt, dass du es in der Route hast. Ich lösche meinen Kommentar. –

Ich denke, dass Ihre Probleme kommen, weil Größen nicht ein arry, sondern ein Objekt ist, und deshalb können Sie nicht auf die Art zugreifen, die Sie versuchen. Versuchen Sie stattdessen mit einer Reihe von Größen!

Quelle

2016-09-07 14:09:59 yhabib

, d.h.Größen: [ Klein: { Größe: 8oz ', Preis: '0.50' }, Medium: { Größe: '16 Unzen', Preis: '1.50' }, Large: { Größe: '24oz', Preis: '2.50' } ] –

Dies funktionierte für mich. Nachdem ich angefangen habe, JS und eckig zu lernen, dachte ich, ich könnte die Eigenschaften eines Containerobjekts durchlaufen, aber diese Lösung macht deutlich, warum das nicht der Fall war und wo meine Defizite lagen. Ich dachte eigentlich, ich mache eine Reihe, sieht aus, als hätte ich viel vor mir gelesen. Vielen Dank! –

AngularJS: Aktualisierung der Tabelleninhalte von Wählen Sie die Option

Antwort

Verwandte Themen