セカンドセレクトの値を変更して値を保持

こんにちは私は最初のセレクタの値をクリックするとmysqlから2番目のセレクトのデータオプションをロードしたいと思います。最後に選択したフィールドのJSONデータを保持し、追加機能を保持します。セカンドセレクトの値を変更して値を保持

私はmysqlからデータをインポートする方法を知っていますが、すべてのセカンドセレクタを変更せずに最初のセレクタを変更するたびに値を取得したいと思います。

どのように動作しますか。カテゴリー（コードには表示されていません）を選択します最も重要なのはです。選択2は1firstカテゴリは、第二セレクタがロードされている変更されたが、私はこれを使用して、すべての第二のセレクタに

イムを変更せずに無制限のフィールドを追加する必要が忘れないでください選択1つのサブカテゴリ

のすべてのカテゴリを受け取りますコード： https://plnkr.co/edit/kKjhpy0fdnOprFA8PAYx?p=preview

<!DOCTYPE html> 
 
<html> 
 
<link rel="stylesheet" href="style.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<body> 
 

 
<div ng-app="myApp" ng-controller="appCtrl"> 
 
<h3>Add Input fields dynamically</h3> 
 

 

 

 
<button ng-click="addSelectItem()">Add select Field</button> 
 

 
<div ng-repeat="item in selects"> 
 
    <select ng-model="item.type"><option ng-repeat='option1 in type' value='{{option1.nomcarac}}' >{{option1.nomcarac}}</option></select> 
 
    <select ng-model="item.brandname" ><option ng-repeat='option1 in valuelist' value='{{option1.nomcarac}}' >{{option1.nomcarac}}</option></select> 
 
    <button ng-click="getValue(item)">get input value</button> 
 
</div> 
 
     
 

 

 
<pre>{{inputs | json}}</pre> 
 
<pre>{{selects | json}}</pre> 
 
</div> 
 

 
<script> 
 
var app = angular.module('myApp', []); 
 
app.controller('appCtrl', function($scope) { 
 
\t $scope.inputs = []; 
 
\t $scope.selects = []; 
 
\t $scope.type = [{nomcarac: "phone"},{nomcarac: "shoes"}] 
 
\t $scope.phonelist = [{nomcarac: "apple"},{nomcarac: "motorola 10g"}] 
 
\t $scope.valuelist = [{nomcarac: "test"},{nomcarac: "test2"}] 
 
\t $scope.shoeslist = [{nomcarac: "jean michel"},{nomcarac: "motorola 10g"}] 
 
\t 
 
\t 
 
    var count = 1; 
 
    var fieldname; 
 
    $scope.addItem = function(){ 
 
    \t fieldname = "Field " + count; 
 
    \t $scope.inputs.push({name: fieldname}); 
 
     count++; 
 
    } 
 
    
 
    $scope.addSelectItem = function(){ 
 
     fieldname = "Field " + count; 
 
    \t $scope.selects.push({name: fieldname}); 
 
     count++; 
 
    } 
 
    $scope.getValue = function(item){ 
 
    \t alert(item.value); 
 
    } 
 
    
 
}); 
 
</script> 
 

 
</body> 
 
</html>

出典

2017-08-01 jean

https://plnkr.co/edit/Ab34HtswE8Ckszw7jdWO?p=preview それはあなたが必要とするものですか？ – Dreamweaver

@Dreamweaverいいえ2NDセレクタの新しいオプションリストをロードするだけです最初の選択をクリックすると、2番目の選択は最初のオプションを選択した値でmysqlから応答を取得します。 2番目のセレクタをすべて変更する必要はありません。関係するセレクタ – jean

@jean、私の答えを見て、それがあなたを助けるかどうかを見てください。 –

私が正しくあなたを理解している場合、あなたはpopulしたいです毎回2番目のselectのオプションを使用して、グループ内の最初の選択の値を変更します。もしそうなら、あなたはこれを達成するためにngChangeを使用して、対応するitemオブジェクト内の値のリストを格納することができます

var app = angular.module('myApp', []); 
 
app.controller('appCtrl', function($scope) { 
 

 
    $scope.inputs = []; 
 
    $scope.selects = []; 
 

 
    $scope.type = [{nomcarac: "phone"}, {nomcarac: "shoes"}]; 
 

 
    $scope.phonelist = [{nomcarac: "apple"}, {nomcarac: "motorola 10g"}]; 
 
    $scope.shoeslist = [{nomcarac: "jean michel"}, {nomcarac: "gucci"}]; 
 
\t 
 
    var count = 1; 
 
    var fieldname; 
 
    $scope.addItem = function(){ 
 
    fieldname = "Field " + count; 
 
    $scope.inputs.push({name: fieldname}); 
 
    count++; 
 
    }; 
 

 
    $scope.addSelectItem = function(){ 
 
    fieldname = "Field " + count; 
 
    $scope.selects.push({name: fieldname}); 
 
    count++; 
 
    }; 
 

 
    $scope.getValue = function(item){ 
 
    console.log(item); 
 
    }; 
 

 
    $scope.getValuesList = function(item) { 
 
    //get actual data from db 
 
    switch (item.type){ 
 
     case 'phone': 
 
     item.valuelist = angular.copy($scope.phonelist); 
 
     break; 
 
     case 'shoes': 
 
     item.valuelist = angular.copy($scope.shoeslist); 
 
     break; 
 
     default: 
 
     item.valuelist = []; 
 
     break; 
 
    } 
 
    }; 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="appCtrl"> 
 
    <h3>Add Input fields dynamically</h3> 
 

 
    <button ng-click="addSelectItem()">Add select Field</button> 
 

 
    <div ng-repeat="item in selects"> 
 
    
 
     <select ng-model="item.type" ng-change='getValuesList(item)'> 
 
     <option ng-repeat='option in type' value='{{::option.nomcarac}}' >{{::option.nomcarac}}</option> 
 
     </select> 
 
     
 
     <select ng-model="item.brandname"> 
 
     <option ng-repeat='option in item.valuelist' value='{{::option.nomcarac}}' >{{::option.nomcarac}}</option> 
 
     </select> 
 
     
 
     <button ng-click="getValue(item)">get input value</button> 
 
    </div> 
 

 
    <pre>{{inputs | json}}</pre> 
 
    <pre>{{selects | json}}</pre> 
 
</div>

出典

2017-08-01 18:31:09

私の最初の選択肢は、MySQLのjsonの応答によって生成されます選択します。最初の選択も動的です – jean

あなたが遠くないと思いますカテゴリを選択します。サブカテゴリはデータを受信しますサブカテゴリを選択します。受信データ1を選択複数の特性を選択します。選択したセレクト1から2受信データを選択しますが、データがダイナミクスであることを忘れないでください。新しいセカンドセレクト時に新しい値が必要ですボタンを無制限に追加するには – jean

@jean次にngChangeハンドラを選択された値に応じて必要に応じて 'type'オブジェクトを選択して変更します。私の答えは、オプションを動的に設定する方法についてのアイデアを伝えることでしたが、私はあなたのプロジェクトの詳細をすべて知っていません。 –

セカンドセレクトの値を変更して値を保持

答えて

関連する問題