Question

这是HTML代码

<div style="width: 250px; top: 100px;position: absolute"class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">
    <input type="text" ng-model="customSelected" placeholder="Custom template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}"  class="form-control" typeahead-show-hint="true" typeahead-min-length="0">
</div>

这里是角js

var treectrl = angular.module('mapsApp', ['ngAnimate', 'ui.bootstrap']);
treectrl = angular.module('mapsApp').controller('TypeaheadCtrl', function ($scope, $http) {

$scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California'];

$scope.child=[['Alabama1child','Alabama2child','Alabama3child'],['Alaska1child','Alaska2child','Alaska3child'......]]
});

如果用户搜索Alabama然后Alabama孩子应该在下面显示可搜索的下拉列表可能在div

Answer 1

您可以这样写：

＆＃13;

var treectrl = angular.module('mapsApp', []);

treectrl = treectrl.controller('TypeaheadCtrl', function($scope) {

  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California'];

  $scope.child = [
    ['Alabama1child', 'Alabama2child', 'Alabama3child'],
    ['Alaska1child', 'Alaska2child', 'Alaska3child']
  ]

  $scope.getChilds = function(customSelected) {
    var index = $scope.states.indexOf(customSelected);
    return $scope.child[index];
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="mapsApp">
  <div class="container-fluid typeahead-demo" ng-controller="TypeaheadCtrl">
    <input type="text" ng-model="customSelected" placeholder="Custom template" uib-typeahead="state as state.name for state in states | filter:{name:$viewValue}" class="form-control" typeahead-show-hint="true" typeahead-min-length="0">

    <div ng-show="customSelected">
      <strong>Selected State: {{customSelected}}<br>
      Childs:
      <div ng-repeat="child in getChilds(customSelected)">
        {{child}}
      </div>
    </div>
  </div>
</div>

＆＃13;

注意：我建议您更改数据格式：

$scope.states = [{
    name: "Alabama",
    child: ["Alabama1child", "Alabama2child", "Alabama3child"]
}, {
    name: "Alaska",
    child: ["Alaska1child", "Alaska2child"]
}];

通过这种方式，您的代码将更加简单。

在可搜索的下拉列表AngularJS中显示状态搜索的子状态

1 个答案: