Javascript AngularJS在单击事件时更新字段_Javascript_Html_Angularjs

Javascript AngularJS在单击事件时更新字段

javascript html angularjs

Javascript AngularJS在单击事件时更新字段,javascript,html,angularjs,Javascript,Html,Angularjs,我有一个简短的问题，我想通过以下方式实现以下目标：我希望{{gender}}有一个默认值undefined或其他值一旦用户单击男性或女性，我想隐藏父级ul，并显示所选的ender，完成后更新{{gender}字段。但是，当用户单击selectedGender时，我希望反转所有内容，并将{{gender}设置为未定义（默认值）男性女性 {{gender} 谢谢 ng click属性可以指定要在控制器范围内调用的函数，然后可以修改所需的值 $scope.selectGender=fun

我有一个简短的问题，我想通过以下方式实现以下目标：

我希望

{{gender}}

有一个默认值undefined或其他值

一旦用户单击男性或女性，我想隐藏父级

ul

，并显示所选的ender

，完成后更新

{{gender}

字段。但是，当用户单击selectedGender

时，我希望反转所有内容，并将

{{gender}

设置为未定义（默认值）


男性
女性

{{gender}

谢谢

ng click属性可以指定要在控制器范围内调用的函数，然后可以修改所需的值

$scope.selectGender=function（）{$scope.selectedGender=true；} $scope.unselectGender=function（）{$scope.selectedGender=null；}

您可以执行以下操作：

  <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>

在javascript中

用作对布尔值的强制转换。首先
将对象强制转换为布尔值
，第二个将验证条件
jshiddle
我给出的答案不是很枯燥，但很有效。因此，您可能需要根据自己的需要对其进行修改。我基本上取了男性和女性，并将它们放入复选框中，以便它们返回真值或假值。我用这个模型来比较他们是否是某一性别，并以此作为展示的内容。对于单击性别本身，我将所有值都删除为默认值null。希望有帮助
这是一支钢笔

这是我用来提出解决方案的API文档
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>

嗨，谢谢你的回答。这不会在{gender}中显示currentGender，对吗？哦，对了，不。你必须用{{currentGender}替换{{gender}，对不起。我更新了我的答案。嗨，出于某种原因，这并不是在单击事件时隐藏
。-还有一个输入错误，第二个函数应该是selectGender。
  <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>

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

<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>

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; 
    }

});