2017-12-28 3 views
0

Ich bin etwas neu in eckigen Versuchen, eine Anwendung mit CRUD-Operationen zu entwickeln. Ich versuche, den Wert einer Dropdown-Liste für die weitere Verwendung zu halten und die Daten in die Felder basierend auf der Auswahl aufzufüllen.Nicht in der Lage, die Daten in die Felder basierend auf der Dropdown-Auswahl zu füllen

Nicht in der Lage, die Daten in die Felder basierend auf der Dropdown-Auswahl zu füllen: wenn ich "product.id als product.name für Produkt in listProducts" anstelle von ng-options = "product.name für Produkt in listProducts“

jede Hilfe Vielen dank im Voraus

var myapp = angular.module("myModule", []); 
 
myapp.controller("myController", function($scope){ 
 
var listProducts = [ 
 
\t \t { id: '100', name: "Macy", price: 200, quantity: 2 }, 
 
\t \t { id: '101', name: "JCPenny", price: 400, quantity: 1 }, 
 
\t \t { id: '102', name: "Primark", price: 300, quantity: 3 }, 
 
\t \t { id: '103', name: "H&M", price: 600, quantity: 1 } 
 
\t ]; 
 
\t 
 
\t $scope.listProducts = listProducts; 
 
    
 
    });
<html ng-app="myModule"> 
 
\t <head> 
 
\t \t <title> CRUD Operations </title> 
 
\t \t <script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js></script> 
 
\t \t <script src="script.js"></script> 
 
\t </head> 
 
\t <body ng-controller="myController"> 
 
    Here i am populating the data into the fields without holding the id as the value in the dropdown which is successfull 
 
    <div> 
 
    <select ng-model=search ng-options="product.name for product in listProducts"> 
 
\t \t </select> \t 
 
\t \t <table> 
 
\t \t \t <thead> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <th>Edit Information </th> 
 
\t \t \t \t </tr> 
 
\t \t \t </thead> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>ID</td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <input type="text" ng-model="search.id"/> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>Name</td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <input type="text" ng-model="search.name"/> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>Price</td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <input type="text" ng-model="search.price"/> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> \t 
 
\t \t </table> 
 
    </div> 
 
    if i hold the id as value display the name in the dropdown , not able to populate the data into the fields 
 
<div> 
 
<select ng-model=searchProduct ng-options="product.id as product.name for product in listProducts"></select> \t \t 
 
\t \t <table> 
 
\t \t \t <thead> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <th>Edit Information </th> 
 
\t \t \t \t </tr> 
 
\t \t \t </thead> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>ID</td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <input type="text" ng-model="searchProduct.id"/> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>Name</td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <input type="text" ng-model="searchProduct.name"/> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>Price</td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <input type="text" ng-model="searchProduct.price"/> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> \t 
 
\t \t </table> 
 
    </div> 
 
    </body> 
 
</html>

+0

Warum können Sie nicht die erste Methode verwenden, die Sie beschreiben? –

+0

@AlexandreNucera, ich muss den Wert (ID) für meine CRUD-Operationen behalten und weitergeben. Bitte schlagen Sie einen anderen Ansatz vor. Danke im Voraus – annie

Antwort

0

Eigentlich geschätzt wird, Sie sind fast da,

In Ihrem Controller, einfach eine leere Variable in Ihrem Umfang zuweisen ausgewählt, um den Wert zu halten:

var myapp = angular.module("myModule", []); 
myapp.controller("myController", function($scope){ 
var listProducts = [ 
     { id: '100', name: "Macy", price: 200, quantity: 2 }, 
     { id: '101', name: "JCPenny", price: 400, quantity: 1 }, 
     { id: '102', name: "Primark", price: 300, quantity: 3 }, 
     { id: '103', name: "H&M", price: 600, quantity: 1 } 
    ]; 

    $scope.listProducts = listProducts; 
    $scope.selectedProduct = {}; 
    }); 

und binden sie an die Auswahl:

<select ng-model="selectedProduct" ng-options="product.name for product in listProducts"> 

Jetzt, wo Sie die ID benötigen, einfach Zugriff es durch $scope.selectedProduct.id

Verwandte Themen