如何使用 angularjs 设置值和填充下拉列表？

Question

我已经在两个下拉菜单中成功设置了选项。

在我的下拉列表中，一个依赖于另一个

假设在我的数据库中 Parent 名字是 Sally，child 名字是 SallyChild2，当更新这个页面时，我需要填充整个数据 select 这个特定的 parent 名称为 Sally，child 名称为 SallyChild2

我的数据库值为 Parent - Sally 和 Child - SallyChild2

所以我想改变Child - SallyChild1

所以我硬编码为这个 wat 但没有工作

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

但它不起作用

这是我的完整代码

这是我的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 : {                              
    "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": "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>

Answer 1

你真正拥有的是一个 children 数组。因此，您可以像这样设置 <select> 标签：

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

现在，您的 selectedChild 模型同时包含 parent 姓名和 child 姓名。您不需要将模型一分为二。

第二部分，为了设置你的初始值，你需要使用angular.equals()到你的SallyChild2目标。像这样：

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];
  }
}

这是一个有效的 Plunker：http://plnkr.co/edit/60ajq6KBmUKXuPeT6yI2?p=preview

要使用两个 select 下拉菜单，只需执行以下操作：

//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;
}

如何使用 angularjs 设置值和填充下拉列表？

How to set value and populate dropdown using angularjs?

angularjs

angularjs-scope

angularjs-ng-options