3

I'm pretty new to angular and I'm kind of stuck with an issue. I have a sample example of my problem jsfiddle

function HelloCntl($scope) {
$scope.selectname1={};    
$scope.selectname2={};    
$scope.selectname3={};

$scope.filter1 = function(item){
  return (!($scope.selectname1&&$scope.selectname1.id)||item.id !=$scope.selectname1.id);
};

$scope.filter2 = function(item){
  return (!($scope.selectname2&&$scope.selectname2.id)||item.id!=$scope.selectname2.id);
};
$scope.filter3 = function(item){
  return (!($scope.selectname3&&$scope.selectname3.id)||item.id !=$scope.selectname3.id);
};
$scope.friends = [
  {
    id:1,name: 'John'},
  {
    id:2,name: 'Mary'},
  {
    id:3,name: 'Mike'},
  {
    id:4,name: 'Adam'},
  {
    id:5,name: 'Julie'}
  
];


}


<div ng:app>
  <div ng-controller="HelloCntl">
  <ul>
    <li ng-repeat="friend in friends | filter:{name:'!Adam'}">
        <span>{{friend.name}}</span>
    </li>
  </ul>
  <select ng-model="selectname1" 
    ng-options="item as item.name for item in friends|filter:filter2|filter:filter3" ><option value="">- select -    </option></select>
   <div>{{selectname1}}</div>

  <select ng-model="selectname2" 
     ng-options="item as item.name for item in friends|filter:filter1|filter:filter3" ><option value="">- select -</option></select>
   <div>{{selectname2}}</div>
 
  <select ng-model="selectname3" ng-options="item as item.name for item in friends|filter:filter1|filter:filter2" ><option value="">- select -</option></select>
   <div>{{selectname3}}</div>
 </div>
</div>

I am trying to implement this code in a single drop down menu, rather than 3 menus. With each click showing the selected option.

The overall functionality I am trying is creating a dropdown menu with items. These items when selected will print their names below with a delete button. Upon selecting an item, it should be automatically removed from the dropdown so that it can't be used further. And adding another item should be possible further below (append)

Unfortunately I can't seem to figure out how to get this to work. Can anyone help me out with this ?

Community
  • 1
  • 1
dracarys3
  • 107
  • 2
  • 12
  • you can't have the same code with a single dropdown, since they use filters that depend on each other. Otherwise you just need: `
    {{s4}}
    `     – Aleksey Solovey Feb 01 '18 at 12:01
  • I tried this, but it shows too many errors. Is this possible too implement the same functionality with just single dropdown menu with a delete button ? Please can you show this in a jsfiddle link ? @AlekseySolovey – dracarys3 Feb 01 '18 at 12:04
  • it would be better if you would describe what you want your code to do ([_edit your question_](https://stackoverflow.com/posts/48562121/edit)). Currently your filters prevent you from selecting the name of a person in more than one dropdown menu. If you have a single menu, this logic falls off as there will never be a situation where you have duplicate names selected – Aleksey Solovey Feb 01 '18 at 12:11
  • @AlekseySolovey Edited the question. I don't understand whether it can be implemented with or without filter or not – dracarys3 Feb 01 '18 at 12:17

2 Answers2

2

I think this the full implementation of what you have requested. You can change some of the logic and adjust my example appropriately:

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script srt="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="HelloCntl">

    <div ng-controller="HelloCntl">
      <select ng-model="selected" ng-options="i as i.name for i in friends"></select>
       <button class="btn btn-danger" ng-click="delete(selected)">X</button>
       <div ng-show="selected" class="alert alert-info">Name: {{selected.name}} | ID: {{selected.id}}</div>
       <br>
      <input ng-model="new_selected">
      <button class="btn btn-info" ng-click="add(new_selected)">Add</button>

    </div>

    <script>
      var app = angular.module('myApp', []);
      app.controller('HelloCntl', HelloCntl);

      function HelloCntl($scope) {
        $scope.friends = [
          {id:1,name: 'John'},
          {id:2,name: 'Mary'},
          {id:3,name: 'Mike'},
          {id:4,name: 'Adam'},
          {id:5,name: 'Julie'}
        ];
        $scope.selected = $scope.friends[0]; // initialise selection
        $scope.delete = function(x) {
          var y = $scope.friends.indexOf(x);
          $scope.friends.splice(y, 1);
        }
        var index = 6;
        $scope.add = function(x) {
          $scope.friends.push({
            id: index,
            name: x
          });
          index++;
          $scope.new_selected = '';
        }

      }
    </script>

</body>

</html>
Aleksey Solovey
  • 4,153
  • 3
  • 15
  • 34
  • Thank you so much for the informational implementation. I tried using my intended logic on the code, but i am unable to append the names below each other. Here's what i believe the functionality should look like working. [Image][1]. Clicking on John from the dropdown adds john down below(also stores it in an array) as well as deletes it from the dropdown list. Once it is deleted from below, it is added back to the drop down. [1 ]: https://lensdump.com/i/wXMGK/ – dracarys3 Feb 02 '18 at 06:40
1

You may just add an "multiple" attribute to your first select tag.

<select ng-model="selectname1" multiple
    ng-options="item as item.name for item in friends|filter:filter2|filter:filter3" ><option value="">- select -</option></select>
   <div>{{selectname1}}</div>

At least this works in the js fiddle, if I understood your problem correctly.

And here you can find, how to limit the multiple select to three answers: HTML Multiselect Limit

Kloker
  • 499
  • 4
  • 14
  • Would there be need to used multiple filters or filters at all ? As i am new to that concept. I don't actually need 3 dropdowns. Can you please show it using any online IDE ? @Kloker – dracarys3 Feb 01 '18 at 12:19