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

Question

我需要在第一次显示 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>

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

Answer 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;
  }
}

希望对您有所帮助。

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

How to display repeated drop down based on button selection in AngularJS

angularjs

angularjs-directive

angularjs-ng-repeat