Wie setze ich den Wert und fülle Dropdown mit angularjs auf?

Wie setze ich einen Wert und fülle das Dropdown-Menü mit angularjs auf?Wie setze ich den Wert und fülle Dropdown mit angularjs auf?

Ich habe erfolgreich die Option in beiden Dropdown-Menüs eingerichtet.

In meinem Drop-Down ist abhängig zu einem anderen

Es sei in meiner Datenbank Elternteil Name ist Sally und Kind Name ist SallyChild2, wenn eine Aktualisierung dieser Seite, ich die gesamten Daten mit ausgewählten diesem speziellen Eltern Namen zu füllen brauchen wie Sally und Childname als SallyChild2

Meine Datenbank Wert Eltern - Sally und Kind - SallyChild2

so möchte ich Kind ändern - SallyChild1

So sehr ich als dieser wat codiert, aber nicht arbeiten

$scope.selectedParent="Sally"; 
$scope.selectedChild="SallyChild2";

Aber seine nicht funktioniert

Hier ist meine komplette Code

Das ist mein script.js

script.js

var app=angular.module('TestApp', ['angular.filter','ui.router']); 

app.config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/'); 

    $stateProvider 
    .state('category', 
    { 
    views : { 
     "body" : 
    { 
     url : '/category', 
     templateUrl : 'category.html', 
     controller : 'TestController' 
    } 
    } 

    }) 

    .state('category.subcategory', 
    { 
    url : '/subcategory', 
    views : {        
    "[email protected]" : 
    { 
    templateUrl : 'sample.html', 
    controller : 'SampleController'    
    } 
    } 
    }) 
}); 

app.controller('MainController', MainController); 

function MainController($scope,$state) 
{ 
    alert("This is MainController") 

    $scope.getCategory=function() 
    { 
    $state.go('category'); 
    } 


} 

app.controller('TestController', TestController); 

//TestController.$inject['dataservice']; 

function TestController($scope, $state){ 


    $scope.data=[ 
    { 
     "parentName": "George", 
     "childName": "George Child1"   
    }, 
    { 
     "parentName": "Folly", 
     "childName": "FollyChild1"   
    }, 
    { 
     "parentName": "Sally", 
     "childName": "Sally Child1"   
    }, 

    { 
     "parentName": "George", 
     "childName": "GeorgChild2"   
    }, 
    { 
     "parentName": "Folly", 
     "childName": "FollyChild2"   
    }, 
    { 
     "parentName": "Folly", 
     "childName": "Infant Food"   
    }, 
    { 
     "parentName": "Sally", 
     "childName": "SallyChild2"   
    } 
    ]; 

    $scope.selectedParent="Sally"; 
    $scope.selectedChild="SallyChild2"; 

    function onParentChange(parent){ 
     if(!parent){ 
    $scope.child = undefined; 
     } 
    } 


    $scope.getValue=function() 
    { 
    alert("Call to Sample Controller") 

    var currentState = $state.current.name; 
    var targetState = 'category.subcategory'; 

    if(currentState === targetState) 
     $state.go($state.current, {}, {reload: true}); 
    else 
    $state.go(targetState); 
    $state.go(".subcategory"); 

    //$state.go('category.subcategory'); 
    } 
} 


app.controller('SampleController', SampleController); 

function SampleController($scope,$state) 
{ 
    alert("This is SampleController") 

}

index.html

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

    <head> 
    <link rel="stylesheet"> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script> 
     <script src="angular-ui-router.js"></script>  
     <script src="script.js"></script> 
     <script src="angular-filter.js"></script> 
    </head> 

    <body ng-controller="MainController"> 
     <a href="#" ng-click="getCategory()">Click to Category</a> 
     <div ui-view="body"></div> 
    </body> 
</html>

category.html

<div>  
    <hr> 

    <div class="col-md-3"> 
     <form> 
    <div class="form-group"> 
     <label for="exampleSelect1"><b>Parent</b></label> 
     <select ng-model="selectedParent" 
     ng-init="selectedParent = null" 
     ng-change="onParentChange(selectedParent)" 
     class="form-control" id="data"> 
     <option value="">--Select--</option> 
     <option ng-repeat="(key,value) in data | orderBy:'parentName'| groupBy:'parentName'">{{key}}</option>   
     </select> 
    </div>    
     </form> 
    </div>  
    <div class="col-md-3">  
     <form>  
    <div class="form-group"> 
     <label for="exampleSelect1"><b>Child Names</b></label> 
     <select class="form-control" id="childnames" ng-model="child" 
     ng-disabled="!selectedParent" 
     ng-options="data.childName for data in data| filter: {parentName:selectedParent} | removeWith:{childName : 'Infant Food'}" ng-change="getValue()"> 
     <option value="">--Select--</option> 
     </select> 
    </div>   

     </form>  
    </div> 
    <div ui-view="subbody"></div> 
    </div>

sample.html

<div> 
    Sample Controller 
</div>

Quelle

2016-05-04 Aravi S

Können Sie ein Beispiel für Jsfiddle hinzufügen? – MaKCbIMKo

Ihre Frage ist nicht sehr klar. Ist Ihr Szenario, dass das erste Dropdown-Feld den Namen des Elternteils und das zweite Dropdown-Feld haben soll, wird der Name des Kindes angezeigt.Beim Ändern des Dropdown-Menüs für die Eltern; Das Dropdown-Menü für Kinder sollte sich auch für das ausgewählte Elternteil ändern. Und es wäre gut, wenn Sie etwas Arbeit Geige oder Plunkr hinzufügen können. –

@Pratik Bhattacharya es funktioniert gut, wenn eine Aktualisierung dieses Dropdown ein Problem bekommen.Suche in meinem db Name des Elternteils ist Sally und Kind Name ist SallyChild2. Wenn eine Bearbeitungsschaltfläche geklickt wird, möchte ich das Dropdown als Eltern Sally und Kind Name SallyChild2.Please help me.Ich bin neu in diesem .Ich kopierte meinen gesamten Code –

Was Sie wirklich haben, ist eine Reihe von Kindern. So stellen Sie Ihre <select> Tag wie folgt auf:

<select ng-model="selectedChild" ng-options="child as child.childName for child in children"></select>

nun Ihr selectedChild Modell enthält sowohl Eltern Namen und Kind Namen. Sie müssen das Modell nicht in zwei Teile trennen.

Der zweite Teil, um Ihre anfänglichen Werte zu setzen, müssen Sie zu Ihrem SallyChild2 Ziel verwenden. Wie folgt aus:

var target = { 
     "parentName": "Sally", 
     "childName": "SallyChild2" 
}; 

for(var i = 0; i < $scope.children.length; ++i) { 
    if(angular.equals($scope.children[i], target)) { 
    $scope.children[i] = target; 

    $scope.selectedChild = $scope.children[i]; 
    } 
}

Hier ist eine Arbeits Plunker: http://plnkr.co/edit/60ajq6KBmUKXuPeT6yI2?p=preview

Um dies zu tun, mit zwei Auswahl Dropdown-Listen, einfach tun:

//parents dropdown 
<select ng-model="selectedParent" ng-options="parent as parent.parentName for parent in data | unique: 'parentName'"></select> 

//children dropdown 
<select ng-model="selectedChild" ng-options="child as child.childName for child in getChildren(selectedParent)"></select>

Javascript:

$scope.getChildren = function(parent) { 
    var children = []; 

    for(var i = 0; i < $scope.data.length; ++) { 
     if($scope.data[i].parentName === parent { 
      children.push($scope.data[i]); 
     } 
    } 

    return children; 
}

Quelle

2016-05-04 14:09:55 Kyle

danke, aber ich brauche zwei dropdowns wenn Eltern auswählen die entsprechenden Kinder sollten in der inneren Childname Dropdown angezeigt werden.Bitte helfen Sie mir.Und eine weitere Sache tatsächlich Parentname und Childname ist nicht statisch man seine aus der Datenbank so sollte es dynamische Daten sein –

Das ist einfach auch tun. ''. 'getChildren (selectedParent)' ist eine Funktion, die ein Array von Kindern zurückgibt, die zu diesem Elternteil gehören. – Kyle

Können Sie Ihr Plunk aktualisieren? –

Wie setze ich den Wert und fülle Dropdown mit angularjs auf?

Antwort

Verwandte Themen