AngularJS updating fields on click event

Question

I have a quick questions, I would like to achieve the following with the below:

I'd like the {{gender}} to have a default value of undefined or something.

Once a user clicks on Male or Female, I'd like to hide the parent ul and show the selectedGender <li> and update {{gender}} field once this is done. However, when a user clicks on the selectedGender <li> i'd like to reverse everything and set {{gender}} to undefined (default value).

        <ul class="col">
            <li class="two" ng-click="selectedGender = true">Male</li>
            <li class="two" ng-click="selectedGender = true">Female</li>
        </ul>
        <li ng-show="selectedGender" ng-click="">{{gender}}</li>

Thanks!

Cristi Berceanu · Accepted Answer · 2015-01-05 22:27:16Z

1

You can do something like:

  <ul class="col" ng-show="selectedGender == false">
            <li class="two" ng-click="selectedGender = 'male'">Male</li>
            <li class="two" ng-click="selectedGender = 'female'">Female</li>
        </ul>
    <li ng-show="!!selectedGender" ng-click="selectedGender = false">{{selectedGender}}</li>

Of course, wrapping everything in nice functions would be better.

  <ul class="col" ng-show="currentGender == false">
                <li class="two" ng-click="selectGender('male')">Male</li>
                <li class="two" ng-click="selectGender('female')">Female</li>
            </ul>
        <li ng-show="!!currentGender" ng-click="selectGender(false)">{{currentGender}}</li>

And then, have a function selectGender in your $scope:

$scope.selectGender = function(gender){
    $scope.currentGender = gender;
}

In javascript !! is used as a cast to boolean. First ! casts the object to boolean and second one verifies the condition.

Jsfiddle here

edited Jan 5, 2015 at 22:27

answered Jan 5, 2015 at 18:32

Cristi Berceanu

1,6931 gold badge10 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1027620 Over a year ago

Hi, thanks for the answer. This won't display the currentGender in {{gender}} right?

Cristi Berceanu Over a year ago

Oh right, no. You have to replace {{gender}} with {{currentGender}}, sorry. I updated my answer.

user1027620 Over a year ago

Hi, for some reason this is not hiding the <ul> when on the click event. - And there is a typo second function should be selectGender.

eemikula · Accepted Answer · 2015-01-05 18:25:33Z

0

The ng-click attribute can specify a function to call within the controller's scope, which can then modify the values you need.

$scope.selectGender = function(){ $scope.selectedGender = true; } $scope.unselectGender = function() { $scope.selectedGender = null; }

<.. ng-click="selectGender()" .. />

answered Jan 5, 2015 at 18:25

eemikula

936 bronze badges

Comments

Dave D · Accepted Answer · 2015-01-05 19:19:08Z

The answer I came up with isn't very dry, but it works. So you may want to amend it for your needs. I basically took the male and female and made them into checkboxes so they would return a true or false value. I used that model to compare if they were a certain gender and use that as what is displayed. For the click on the gender itself I remove all of the values to default null. Hope that helps.

Here is a working pen http://codepen.io/ddavisgraphics/pen/raWZGd

Here is the API docs i used to come up with the solution https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

The HTML

<body ng-app="app"> 

<ul ng-controller="GenderCtrl"> 
  <li> Whats your Gender 

<ul class="col">
    <li class="two">
      <input type="checkbox" ng-model="maleValue" ng-click="userGender()" value="male"/> 
      Male
    </li>
    <li class="two"> 
      <input type="checkbox" ng-model="femaleValue" ng-click="userGender()" value="female"/> 
      Female
    </li>
    </ul> </li> 

<li ng-click="removeGender()" ng-Show="selectedGender"> Your current {{gender}} </li> 

  </ul> 
</body>

The JS

var app = angular.module('app', []);

app.controller("GenderCtrl", function ($scope) {
    $scope.gender = "";  // Leave it undefined but set the variable
    $scope.maleValue = null;
    $scope.femaleValue = null; 

    $scope.selectedGender = false; 

    $scope.userGender = function(){ 
      $scope.selectedGender = true; 

       if($scope.maleValue === true) { 
          $scope.gender = "Male"; 
          console.log('testing male'); 
        } else if ($scope.femaleValue === true) { 
          $scope.gender = "Female";
          console.log('testing female'); 
        } else {
          $scope.gender = null; 
          $scope.selectedGender = false; 
        }

    }

    $scope.removeGender = function(){
      $scope.gender = null; 
      $scope.maleValue = null;
      $scope.femaleValue = null; 
    }

});

Collectives™ on Stack Overflow

AngularJS updating fields on click event

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related