AngularJS 在单击事件时更新字段

Question

我有一个快速的问题，我想通过以下实现：

我希望 {{gender}} 具有未定义的默认值或其他值。

一旦用户点击男性或女性，我想隐藏父级 ul 并显示 selectedGender <li> 并在完成后更新 {{gender}} 字段。但是，当用户单击 selectedGender <li> 时，我想反转所有内容并将 {{gender}} 设置为未定义（默认值）。

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

谢谢！

Answer 1

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

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

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

Answer 2

您可以这样做：

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

当然，用好的函数包装一切会更好。

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

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

在 javascript 中，!! 用作 boolean 的转换。第一个 ! 将对象转换为 boolean，第二个验证条件。

Jsfiddle here

Answer 3

我想出的答案不是很枯燥，但很管用。所以你可能想根据你的需要修改它。我基本上将男性和女性放入复选框中，这样它们就会 return 一个真值或假值。我用那个模型来比较他们是否是某种性别，并将其用作显示的内容。对于点击性别本身，我将所有值删除为默认 null。希望有所帮助。

这是一支工作笔 http://codepen.io/ddavisgraphics/pen/raWZGd

这是我用来提出解决方案的 API 文档 https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

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>

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

});

AngularJS 在单击事件时更新字段

AngularJS updating fields on click event

html

javascript

angularjs