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，这基本上是所有代码，所以这是我的第一个小插曲。

$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中的按钮选择显示重复的下拉列表

1 个答案: