Как заполнить значения в выпадающих списках с помощью angularJS?

Как заполнить выпадающие списки с помощью angularJS?

Я успешно настроил опцию в обоих выпадающих списках.

В моем выпадающем списке один зависит от другого IE родителя имеют ответ ребенка

Предположим, в моей базе данных хранится родительское имя London и дочернее имя London State2,

На моей html-странице, когда я щелкаю редактировать это содержимое, мне нужно заполнить все данные в моем окне drop, выбрав это конкретное родительское имя как «London» и дочернее имя как » London State2″

Единственное при редактировании контента, что контент будет выбирать в drobdown меню..

то есть. Я хочу выбрать родительское имя в качестве London, а дочернее имя-London State2 по умолчанию при открытии этой страницы

Моя проблема когда я открываю эту страницу, она будет по умолчанию как родительское имя —Select— и дочернее имя —Select—

Это мой сценарий.js

скрипт.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 : {                             
    "subbody@category" :
    {
    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": "India",
      "childName": "India State1"         
     },
     {
      "parentName": "USA",
      "childName": "USA State1"        
     },
     {
      "parentName": "London",
      "childName": "London State1"         
     },

     {
      "parentName": "India",
      "childName": "India State2"         
     },
     {
      "parentName": "USA",
      "childName": "USA State2"        
     },
     {
      "parentName": "USA",
      "childName": "USA State3"         
     },
     {
      "parentName": "London",
      "childName": "London State2"         
     }
    ];

    $scope.selectedParent="London";
    $scope.selectedChild="London State2";

    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")

}

индекс.формат 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>

категория.формат 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>

образец.формат html

<div>
    Sample Controller
</div>

1 ответ

  1. Из вашего примера вы хотите, чтобы Лондон был значением по умолчанию в вашем раскрывающемся списке.. вы можете достичь этого, как это вместо ng-init,

    $scope.selectedParent = 'London'
    $scope.selectedParent = $scope.data[2]['parentName'] // it will show london according to your eg data file.
    
    //for child,
    $scope.child = 'London State1'
    $scope.child = $scope.data[2]['childName']
    

    Это будет обновляться автоматически при выборе значений из раскрывающегося списка в интерфейсе..