在第二選擇上更改值並保留值

Question

您好，當我單擊第一個選擇器的值時，我想從mysql加載第二個選擇的數據選項。 並保留最后選擇的字段的JSON數據，並保留append函數。

我知道如何從mysql導入數據，但是我想每次更改第一個選擇器時都獲取值，而不更改所有第二個選擇器，僅更改相關的選擇器。

這個怎么運作。 我選擇一個最重要的類別（代碼中未顯示）：select 1接收所有選定類別的類別。 選擇2接收選擇1子類別的所有類別

當1first類別更改時，將加載2nd選擇器，但不要忘記我需要添加無限字段而不更改所有2nd選擇器

我正在使用此代碼： 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) { $scope.inputs = []; $scope.selects = []; $scope.type = [{nomcarac: "phone"},{nomcarac: "shoes"}] $scope.phonelist = [{nomcarac: "apple"},{nomcarac: "motorola 10g"}] $scope.valuelist = [{nomcarac: "test"},{nomcarac: "test2"}] $scope.shoeslist = [{nomcarac: "jean michel"},{nomcarac: "motorola 10g"}] 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){ alert(item.value); } }); </script> </body> </html>

Answer 1

如果我對您的理解正確，那么您每次想填充第二個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"}]; 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>

在第二選擇上更改值並保留值

問題描述

1 個解決方案

解決方案1
0 已采納 2017-08-01 18:31:09

在第二選擇上更改值並保留值

問題描述

1 個解決方案

解決方案1 0 已采納 2017-08-01 18:31:09

解決方案1
0 已采納 2017-08-01 18:31:09