Question

我有一个角度控制器，卡片中有一个巨大的形状分割。因此，每次用户选择标题时，该部分的卡片都会显示（例如姓名部分，地址部分，联系人数据，大学数据，工作数据等）。

只有两个部分的相关代码是：

angular.module('controllers', [])
.controller('EditUserController', function($scope, $state) {

  $scope.mustShowName = false;
  $scope.mustShowContact = false;

  $scope.toogleShowContact = function() {
    if ($scope.mustShowContact) {
      $scope.mustShowContact = false;
    } else {
      $scope.mustShowContact = true;
    }
  };
  $scope.toogleShowName = function() {
    if ($scope.mustShowName) {
      $scope.mustShowName = false;
    } else {
      $scope.mustShowName = true;
    }
  };
});

但是有各种各样的牌。有一种方法可以在这样的事情中进行重构吗？：

$scope.toogleSection = function(section) {
  if (section) {
    section = false;
  } else {
    section = true;
  }
};

...

$scope.toogleSection($scope.mustShowName);

如果我尝试它，它不起作用并且不会抛出错误，所以我认为它只是复制变量而不是引用原始变量。

Answer 1

您可以重构它，以便您可以将属性的名称作为参数发送给函数，如下所示：

$scope.toggleSelection = function(sectionName) {
  $scope[sectionName] = !$scope[sectionName];
};

Answer 2

当您要求$scope.mustShowName时，您只需获取值而不是属性的引用 - 即true或false。而是将节名称作为字符串传递，并使用名称引用范围中的属性。

btw - 更好的想法是创建一个封装行为的指令，并帮助你留下DRY。

$scope.toogleSection = function(sectionName) {
  if ($scope[sectionName]) {
    $scope[sectionName] = false;
  } else {
    $scope[sectionName] = true;
  }
};

$scope.toogleSection('toogleShowName');

Answer 3

您可以使用ng-if =＆＃34; show＆＃34;对于卡的详细部分。然后执行ng-click =＆＃34; show =！show＆＃34;。 BAM！你有一个触摸切换，将显示和隐藏你放置的ng-if。这是我制作的应用程序的示例。

<div class="item" ng-show="directions">
    <!--directions go here-->
</div>
    <div style="text-align: center; background-color:#284f9a;" class="item" ng-click="directions = !directions">
        <p style="color: white;" ng-if="directions == false">See Directions:</p>
        <p style="color: white;" ng-if="directions == true">Close Directions:</p>
</div>

有了这个我可以显示和隐藏方向并改变显示/隐藏按钮所说的内容。这对于ng-repeat也非常有效，只能切换你点击的项目。

动态访问方法中的控制器变量

3 个答案: