Question

＆＃13;

var appCompAssets = angular.module('app.company.assets', []);

appCompAssets.controller('locationDetailCTRL', function($scope, $http) {
  // LOAD LOCATION DETAILS

  $scope.loadBranches = function() {

    $http.get('../getBranches_id_name/' + $scope.compid)
      .then(
        function(response) {
          if (response.data.length !== 0) {
            $scope.getBranches_id_name = response.data;
            console.log($scope.getBranches_id_name);
          }
        },
        function(response) {
          // error handling routine
          console.log('$Error: no data for branch id & name');
        });
  };

  $scope.loadLocations = function(branch_id) {
    $scope.branchid = branch_id;
    $http.get('../getLocations_id_name/' + $scope.branchid)
      .then(

        function(response) {

          if (response.data.length !== $scope.branchid) {
            $scope.getLocations_id_name = response.data;
            console.log($scope.getLocations_id_name);
          }

        },
        function(response) {
          // error handling routine
          console.log('$Error: no data for location id & name');
        });
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-ng-app="app.company.assets" data-ng-controller="locationDetailCTRL">

  <div class="row" data-ng-init="loadBranches()">
    <div class="col-sm-12">
      <div class="form-group">
        <label for="branch_id" class="small"><i>Branch</i>
        </label>
        <select class="form-control input-sm" data-ng-init="loadLocations(assetInfo.branch_id)" data-ng-change="loadLocations(assets.branch_id)" id="branch_id" name="branch_id" data-ng-model="assets.branch_id">
          <option data-ng-selected="assetInfo.branch_name ===b.branch_name" data-ng-repeat="b in getBranches_id_name" value="{{b.id}}">{{b.branch_name}}</option>
        </select>
      </div>

    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <div class="form-group">
        <label for="location_id" class="small"><i>Location</i>
        </label>

        <select class="form-control input-sm" id="location_id" name="location_id">
          <option value=""></option>
          <option data-ng-repeat="l in getLocations_id_name" value="{{l.id}}" data-ng-selected="l.location_name == assetInfo.location_name">{{l.location_name}}</option>
        </select>
      </div>
    </div>
  </div>
</div>

＆＃13;

伙计们，我在同时进行数据选择，数据输入模型和数据更改工作方面遇到了问题。

如果没有data-ng-model和data-ng-change

数据-ng-选择正常。

排除数据-ng-模型和数据-ng-更改并仅保留数据-ng选择，输出如下：

虽然，它能够显示所需的值，但在更改分支（下拉列表）时，相应分支的位置不会发生变化，因为不存在ng-change和ng-model。

但是，如果将所有上述数据-ng属性放在一起（data-ng-model，ng-change和ng-selected），它将无法正确显示，因为未选择应该选择的分支。输出如下：

更改分支和位置将更改，该部分工作正常。

您的帮助将不胜感激。谢谢！。

顶部的响应结果是分支，底部的响应结果是位置。谢谢。

Answer 1

你需要的是一个级联下拉列表，你的html代码对我来说似乎很复杂。

您可以按照以下方式简化它。

＆＃13;

angular
	.module("demo", [])
	.controller("DefaultController", DefaultController);
  
  function DefaultController() {
  	var vm = this;
    vm.branches = [
      { id: 1, name: 'Testing Branch 1' },
      { id: 2, name: 'Testing Branch 2' },
      { id: 3, name: 'Testing Branch 3' }
    ];
    
    vm.locations = [
      { id: 1, branchId: 1, name: 'Office Room 1' },
      { id: 2, branchId: 1, name: 'Office Room 2' },
      { id: 3, branchId: 2, name: 'Office Room 3' },
      { id: 4, branchId: 3, name: 'Office Room 4' }
    ];
    
    vm.loadLocations = loadLocations;
    
    // set data
    getData();
    
    function loadLocations(branchId) {
      // load locations here when branch is changed.
      // if locations are loaded only when a branch is selected
      // then you can remove the filter in ng-options for Location
      console.log('Selected BranchId: ' + branchId);
    };
    
    function getData() {
      // get data via AJAX here and set the selected options in the view via data binding (ngModel)
      var data = {
      	branch: {
          id: 3,
          name: 'Testing Branch 3'
        },
        location: {
          id: 4,
          branchId: 3,
          name: 'Office Room 4'
        }
      };
      
      vm.branch = data.branch.id;
      vm.location = data.location.id;
      }
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <h1>Cascading DropDownList</h1>
    <hr />
    <h4>Branch</h4>
    <select ng-options="branch.id as branch.name for branch in ctrl.branches"
            ng-model="ctrl.branch"
            ng-change="ctrl.loadLocations(ctrl.branch)">
      <option value="">Select Branch</option>
    </select>
    <h4>Location</h4>
    <select ng-options="location.id as location.name for location in ctrl.locations | filter: { branchId: ctrl.branch }"
            ng-model="ctrl.location"
            ng-disabled="!ctrl.branch">
      <option value="">Select Location</option>
    </select>
  </div>
</div>

＆＃13;

Answer 2

尝试这样，希望它有所帮助，如果您正在寻找不同的东西，请告诉我。

Plunker：http://plnkr.co/edit/VE5ja2kkV9Xp7og1CkAl?p=preview

脚本

中的

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

$scope.branches = [
  { id: 1, name: 'Testing Branch 1'},
  { id: 2, name: 'Testing Branch 2'},
  { id: 3, name: 'Testing Branch 3'}
];

$scope.locations = [
  { id: 1, branchId: 1, name: 'Office Room 1'},
  { id: 2, branchId: 1, name: 'Office Room 2'},
  { id: 3, branchId: 2, name: 'Office Room 3'},
  { id: 4, branchId: 3, name: 'Office Room 4'}
];

$scope.loadLocations = function(branchId) {
  console.log('Selected BranchId: ' + branchId);
};

// for selecting options on page load set the model for both the select

$scope.selectedBranchId =  2;
$scope.selectedLocationId =  3;

}）;

在视野中。

<body ng-controller="MainCtrl">

<h1>Cascading DropDownList</h1>
<hr />
<h4>Branch</h4>
<select ng-options="branch.id as branch.name for branch in branches"
        ng-model="selectedBranchId"
        ng-change="loadLocations(selectedBranchId)">
  <option value="">Select Branch</option>
</select>
<h4>Location</h4>
<select ng-options="location.id as location.name for location in locations | filter: { branchId: selectedBranchId }"
        ng-model="selectedLocationId"
        ng-disabled="!selectedBranchId">
  <option value="">Select Location</option>
</select>

</body>

Answer 3

                 <div class="row" data-ng-init="loadBranches()">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label for ="branch_id" class="small"><i>Branch</i></label>
                            <select class = "form-control input-sm" 
                                    data-ng-options="b.id as b.branch_name for b in getBranches_id_name" data-ng-init="branch_id = assetInfo.branch_id" data-ng-model="branch_id"
                                    data-ng-change="loadLocations(branch_id)" id="branch_id" 
                                    name="branch_id"></select>
                        </div>
                    </div>
                </div>                          
                <div class="row" data-ng-init="loadLocations(branch_id)">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label for ="location_id" class="small"><i>Location</i></label>
                            <select class = "form-control input-sm"
                                    data-ng-options="l.id as l.location_name for l in getLocations_id_name" 
                                    id="location_id" name="location_id" data-ng-init="location_id = assetInfo.location_id" data-ng-model="location_id" data-ng-disabled="!branch_id" ></select>
                        </div>
                    </div>
                </div>

你好@Deep和@abdul mateen mohammed，上面的代码，它按我的意思工作，但是，有一个问题，我无法将值保存到数据库（所选选项的值未保存到数据库）。

但是使用下面的代码，我可以将值保存到数据库，但它不会像我想的那样工作，默认情况下它会在加载时预加载分支和位置。我所做的唯一改变是通过＆＃34;添加＆＃34;轨道。在ng-option中。

                 <div class="row" data-ng-init="loadBranches()">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label for ="branch_id" class="small"><i>Branch</i></label>
                            <select class = "form-control input-sm" 
                                    data-ng-options="b.id as b.branch_name for b in getBranches_id_name track by b.id" data-ng-init="branch_id = assetInfo.branch_id" data-ng-model="branch_id"
                                    data-ng-change="loadLocations(branch_id)" id="branch_id" 
                                    name="branch_id"></select>
                        </div>
                    </div>
                </div>                          
                <div class="row" data-ng-init="loadLocations(branch_id)">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label for ="location_id" class="small"><i>Location</i></label>
                            <select class = "form-control input-sm"
                                    data-ng-options="l.id as l.location_name for l in getLocations_id_name track by l.id" 
                                    id="location_id" name="location_id" data-ng-init="location_id = assetInfo.location_id" data-ng-model="location_id" data-ng-disabled="!branch_id" ></select>
                        </div>
                    </div>
                </div>

您的帮助将不胜感激。谢谢。

@Deep，这就是我将数据保存到数据库的方式。谢谢。在控制器中：

function update() {
    $this->model->update($_POST);
}

在模特中：

function update($data) {


    $assetid = $data['assetid'];
    unset($data['assetid']); // remove @assetid element from the array @data


    $this->db->update('assets', $data, "`id` = {$assetid}");

}

data-ng-model和data-ng-change不适用于数据选择

3 个答案: