Question

你好我想点击第一个选择器的值时从mysql加载第二个选择的数据选项。并保留所选最后字段的JSON数据并保持追加功能。

我知道如何从mysql导入数据，但我希望每次更改第一个选择器时都获取值而不更改所有第二个选择器，只更改相关的选择器。

工作原理。我选择了一个类别（未在代码中显示）最重要的：选择1接收所选类别的所有类别。选择2接收所有类别的选择1子类别

当第一个类别被更改时，第二个选择器被加载但不要忘记我需要添加无限字段而不更改所有第二选择器

即时使用此代码： https://plnkr.co/edit/kKjhpy0fdnOprFA8PAYx?p=preview

＆＃13;

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

＆＃13;

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 个答案: