CODEWITHSUNDEEP
javascriptangularjs
Hopez
Hopez

Reputation: 141

Add or remove field based on select option in Angularjs

I am trying to display or hide a field based on the drop-down option selected. Also if the field is active, then the option shouldn't be displayed in the Add filter dropdown list. I've created a plunker here.

Based on what I have done so far, if I click on the remove field button(x), the field is hidden but when I add the field from the add filter option and try removing it again, it doesn't work. I'm not sure I'm doing this right and I feel there should be a much better approach to achieving this. Can anyone be of assistance, please?

Controller

angular.module('app', [])
.controller('Main', ['$scope', function($scope) {

$scope.title = "hello";
$scope.isName = true;
$scope.isDropdown = true;

$scope.hideName = function() {
  $scope.isName = false;
  $scope.removeFilterOption($scope.isName);
};

$scope.hideDropdown = function() {
  $scope.isDropdown = false;
};

$scope.removeFilterOption = function(value) {
  if (value != $scope.isName) {
    $scope.add_options.splice(1, 1);
  } else {
    $scope.add_options.splice(1, 0, {
      text: "Name",
      value: "name"
    });
  }
};

$scope.add_options = [];
$scope.add_filter = $scope.add_options[0];

$scope.selected = function(value) {
  if (value === "name") {
    $scope.isName = true;
  } else if (value === "cars") {
    $scope.isDropdown = true;
  }
}

}]);

Template

<body ng-controller="Main">
{{title}}
 <div ng-show="isName">
  <label> Name
   <span>
    <button ng-click="hideName()">&times;</button>
   </span>
  </label>
  <div>
   <input/>
  </div>
 </div>

<div ng-show="isDropdown">
 <label> Cars 
  <span>
    <button ng-click="hideDropdown()">&times;</button>
  </span>
 </label>
<div>
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
 </div>
</div>

<div>
 <h5>Add filter</h5>
  <select 
    ng-model="add_filter" ng-selected="selected(add_filter.value)" 
    ng-options="x.text for x in add_options track by x.value">
  </select>
 </div>
</body>

Upvotes: 1

Views: 1319

Answers (3)

Jimenemex
Jimenemex

Reputation: 3176

This can be really simple to do if you remove the tracking. You can do it with simply thinking about ng-show and ng-hide. Check out the code below. You essentially just use ng-show and ng-hide correctly. This sample is a lot more simpler to follow than other approaches. You just have to remember to show hide things in the correct places.

angular.module('app', [])
.controller('Main', ['$scope', function($scope) {
  
   $scope.title= "hello";
   $scope.isName = true;
   $scope.isCar = true;
   
   $scope.hideName = function() {
      $scope.isName = false;
    };
    
    $scope.hideCar = function() {
      $scope.isCar = false;
    };

    $scope.getOption = function() {
      var selected = $scope.selected;
      switch(selected) {
        case "Name":
          $scope.isName = true;
          break;
        case "Cars":
          $scope.isCar = true;          
          break;
      }
      $scope.selected = ""; // Reset Drop down
    }

}]);
<!DOCTYPE html>
<html ng-app="app">

<head>
 <link rel="stylesheet" href="style.css" />
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
   <script src="script.js"></script>
</head>

<body ng-controller="Main">
  {{title}}
  <div ng-show="isName">
    <label> Name
      <span>
        <button ng-click="hideName()">&times;</button>
      </span>
    </label>
    <div>
      <input/>
    </div>
  </div>

  <div ng-show="isCar">
    <label> Cars 
      <span>
        <button ng-click="hideCar()">&times;</button>
      </span>
    </label>
    <div>
      <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </div>

  </div>
  
        <h5>Add filter</h5>
  <select ng-model="selected" ng-change="getOption()">
    <option value=""> </option>
    <option ng-hide="isName" value="Name">Name</option>
    <option ng-hide="isCar" value="Cars">Cars</option>
  </select>


</body>

</html>

Upvotes: 2

vertika
vertika

Reputation: 1424

[Updated] I have changed your functions a little bit and its working fine now . You should not use Splice method like this in your case as you have used , it will just keep on adding names or Cars whenever you add cross button :

PFB the changed code :

$scope.hideName = function() {
  $scope.isName = false;
  $scope.removeFilterOption($scope.isName,"name","Name");
};

$scope.hideDropdown = function() {
  $scope.isDropdown = false;
  $scope.removeFilterOption($scope.isName,"car","Cars");
};

$scope.removeFilterOption = function(value,type,text){
  if($scope.add_options.length>0){
  for(var i=0;i<$scope.add_options.length;i++){
    if(type=='name'){
     $scope.add_options.splice(i,1,{
      text: "Name",
      value: "name"
    });

    }else{
      $scope.add_options.splice(i,1,{
      text: "Cars",
      value: "car"
    });
    }
   }
  }else{
    $scope.add_options.push({
      text:  text,
      value: type
    });

  }

};

This is working fine for me.

Upvotes: 0

Shubham Agrawal
Shubham Agrawal

Reputation: 417

There are many better ways to approach this, like instead of having 'isName' and 'isDropDown', use something like a filter and assign value to 'name' and dropdown.

Upvotes: 0

Related Questions