Question

我想知道如何使用Angular完成此操作，因为似乎ng-click可以使用，然后ng-model似乎可以使用。

我想单击Text然后让div显示其内容并且它无法正常工作

<div class="well" ng-controller="MyController">
    <a class="btn btn-primary" ng-model="selMe" ng-click="handleAnchorClick()">Enter Address</a>
</div>
<br>
<br>
<div ng-if="selMe">
      adfadf
</div>

简单的模块和控制器

  angular.module('myapp', []);
  angular.module('myapp').controller('MyController', MyController)

  function MyController($scope) {

  }

Answer 1

您没有在ng-click功能中执行任何操作，并且控制器外部的ng-if链接到其中的变量。

https://jsfiddle.net/gdxwtoL7/1/

HTML

<div class="well" ng-controller="MyController">
<a class="btn btn-primary" ng-click="handleAnchorClick()">Enter Address</a>
<br>
<br>
  <div ng-if="selMe">
    adfadf
  </div>
</div>

JS

angular.module('myapp', []);

angular.module('myapp').controller('MyController', MyController)

function MyController($scope) {
 $scope.handleAnchorClick = function () {
   $scope.selMe = true
 }
}

Answer 2

ngModel 指令绑定输入，选择， textarea （或＆gt;自定义表单控件）使用 NgModelController 创建并通过此指令公开的范围内的属性。

ngModel 负责：


将视图绑定到模型中，其他指令如input，textarea或select require。

提供验证行为（即必填，数字，电子邮件，网址）。

保持控件的状态（有效/无效，脏/原始，触摸/未触摸，验证错误）。

在元素上设置相关的css类（ng-valid，ng-invalid，ng-dirty，ng-pristine，ng-touching，ng-untouched，ng-empty，ng-not-empty），包括动画。

使用其父表单注册控件。


ngClick 指令允许您在单击元素时指定自定义行为。

注意：我们需要ng-click来捕获事件并操纵存储在ng-model中的数据。

Answer 3

这是一个简单的代码，无需控制器：

<div class="well">
<a class="btn btn-primary" href="" ng-click="show=true">Enter Address</a>
</div>
<br>
<br>
<div ng-show="show">
 adfadf
</div>

Answer 4

控制器必须知道您希望它显示的div。 ng-if正在等待您可以从控制器更改的selme的值。 ng-model在添加双向数据绑定时将数据绑定到控制器。我对您的代码进行了一些改进，以便在多次单击文本时切换div。 https://jsfiddle.net/gdxwtoL7/2/

<div class="well" ng-controller="MyController">

  <a class="btn btn-primary" ng-model="selMe" ng-click="handleAnchorClick(selMe)">Enter Address</a>
  <br>
  <br>
  <div ng-if="selMe">
    adfadf
  </div>
</div>

angular.module('myapp', []);

angular.module('myapp').controller('MyController', MyController)

function MyController($scope) {
 $scope.handleAnchorClick = function (selMe) {
   $scope.selMe = !selMe
 }
}

Answer 5

正如@MikeHughesIII已经指出的那样，在你的控制器之外，你无法达到$ scope变量。

为了完整起见，我在Mike的答案之后添加了一个快速片段，显示了一个显示/隐藏（切换）方法，其中该函数将可见性变量设置为与其当前状态相反（true或false）调用函数时。

希望有助于澄清问题。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="myController">
    <h1>Hello {{hello}}!</h1>
    <a href ng-click="toggleDivVisibility()">Enter your address</a>
    <br>
    <textarea ng-if="visible" name="address" id="address" cols="30" rows="5"></textarea>
  </div>

  <script>
    angular.module('myApp', []);

    angular.module('myApp')
      .controller('myController', myController);

    function myController($scope) {
      $scope.hello = "world";
      $scope.visible = false;
      $scope.toggleDivVisibility = function() {
        $scope.hello = 'mondo';
        $scope.visible = !$scope.visible;
      }
    }
  </script>

</body>
</html>

＆＃13;

Angular单击Text以显示div标签

5 个答案: