如何根据AngularJS中的按钮选择显示重复下拉答案

【问题标题】：How to display repeated drop down based on button selection in AngularJS如何根据AngularJS中的按钮选择显示重复下拉
【发布时间】：2019-01-29 19:54:37
【问题描述】：

我需要在第一次显示一个下拉列表和 Plus 按钮。基于按钮单击它应该显示更多组合，我的意思是相同的下拉列表，其中排除了我们从第一个下拉列表和 plus 按钮中获得的先前选择的值。应根据 plus 按钮选择重复此操作。

这是我的代码：

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

  $scope.init = function() {
    $scope.display = false;
  };

  $scope.init();

  $scope.records = [
    { id: "part1",  part: "Frt Bumper Cover" },
    { id: "part2",  part: "Frt Lwr Bumper Cover" },
    { id: "part3",  part: "Frt Upr Bumper Cover" },
    { id: "part4",  part: "Hood Panel" },
  ];

  $scope.changedValue = function(key) {
    // alert(key);
    //var index = $scope.records.indexOf(item);
    //alert(index);
    $scope.records.splice(index, 1);

    //delete $scope.records[key];
    // alert(JSON.stringify($scope.records));
  };

  $scope.sample = function() {

    $scope.display = true;
    // alert("sample: "+$scope.display);
    //alert("inside sample:::"+JSON.stringify($scope.records));
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl" ng-init="init()">
  <div>
    <select ng-model="selectedRecord"
            ng-change="changedValue(selectedRecord)"
            ng-options="record.id as record.part for record in records">
      <option ng-repeat="x in records">{{x.part}}</option>
    </select>
    <input type="submit" value="+" ng-show="records.length!=1"
           ng-click="sample()" />
  </div>

  <div ng-show="display">
    <select ng-model="selectedRecord"
            ng-change="changedValue(selectedRecord)"
            ng-options="record.id as record.part for record in records"> 
    </select>
    <input type="submit" value="+" ng-show="records.length!=1"
           ng-click="sample()" />
  </div>
</body>

我无法这样显示，请分享您的想法

【问题讨论】：

标签： angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

朋友，我想我有办法解决你的问题。 :D

我认为这是非常基本的代码，所以如果需要，我很乐意更深入地解释。

看这里的代码：plnkr，这基本上是所有代码，所以它是我的第一个 plunker。

$scope.originalRecords = [
  { id: "part1",  part: "Frt Bumper Cover" },
  { id: "part2",  part: "Frt Lwr Bumper Cover" },
  { id: "part3",  part: "Frt Upr Bumper Cover" },
  { id: "part4",  part: "Hood Panel" },
];

$scope.selectArray = [{selectedOption: null, options: $scope.originalRecords}];

$scope.selectedOption =[];

$scope.hideButton = false;

$scope.addNewSelect = function (arrayToSearch, selectedOption) {
  var index = arrayToSearch.map(function(d) { return d['part'];}).indexOf(selectedOption);
  var newRecords = arrayToSearch.slice();
  newRecords.splice(index, 1);
  if (newRecords.length > 0) {
    $scope.selectArray.push({selectedOption: null, options: newRecords});
  } else {
    $scope.hideButton = true;
  }
}

希望对你有帮助。

【讨论】：

非常感谢我亲爱的朋友@Meiker .. 它按预期工作。