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

Question

I need to display a drop down along with Plus button at first time. Based on button click it should display one more combination , I mean same drop down with options excluded previous selected value which we have from the first drop down and the plus button. This action should be repeat based on plus button selection.

Here is my code:

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>

I am unable to display like that, please share your ideas to do this

Meiker · Accepted Answer · 2018-08-23 16:04:33Z

My friend, i think i have a solution for your problem. :D

Its very basic code i think, so i would be happy to explain more in depth if needed.

look code here: plnkr, this is basically all the code, so its my first 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;
  }
}

Hope it helps.

Thanks a lot my dear friend @Meiker .. It's working as expected.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related