データ-ngのモデルとデータ-ngの変更は、データ-NG-選択

Question

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'); 
 
     }); 
 
    }; 
 
});

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

みんな、私はデータ-NG-選択することで問題を抱えています、データ-ng-で作業されていませんモデルとデータ変更作業を同時に行うことができます。

データ-NG-選択したデータ-ngのモデルとデータ-ngの変更

がなければ、正常に動作しています。

がデータNGモデルとデータNG変化を除外し、データのみ-NG選択まま、出力は以下の通りである：

望んでいた値を表示することができる、がブランチ（ドロップダウン）を変更するとき、ng-changeおよびng-modelが存在しないので、それぞれのブランチのロケーションは変更されません。

しかし、前述のすべてのdata-ng属性（data-ng-model、ng-change、およびng-selected）を使用すると、選択されていないブランチが選択されていないため、 。出力は以下の通りです：

ブランチと変化する場所を変更するため、その部分は正常に動作しています。

あなたの親切な援助をいただければ幸いです。ありがとうございました！。

上部の応答結果はブランチ用で、下部の応答結果はロケーション用です。ありがとうございました。あなたが必要なもの

Answer 1

カスケードドロップダウンリストで、よくあなたのhtmlコードは、あなたが達成しようとしている何のために私には複雑なようです。

次のように簡略化することができます。

angular 
 
\t .module("demo", []) 
 
\t .controller("DefaultController", DefaultController); 
 
    
 
    function DefaultController() { 
 
    \t 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 = { 
 
     \t 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; 
 
     } 
 
    } 
 

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

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モハメッド、上記のコードで、私は望んでいたとして、それは動作しますが、しかし、問題があり、私は、データベースに値を保存できませんでした（の値選択したオプションはデータベースに保存されません）。

しかし、以下のコードでは、データベースに値を保存できますが、ロード時にデフォルトではブランチと場所をプリロードするようにしても機能しません。私が行った唯一の変更は、ng-optionに "track by"を追加することです。

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

}