Angular 指令总汇

第一段：

AngularJS是目前前端开发中比较流行的框架之一，它为我们提供了十分丰富和强大的指令库，这些指令可以帮助我们在HTML页面上实现更多的功能和交互效果。

 // 示例代码-1
<div ng-app="myApp">
  <p ng-bind="name"></p>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
    $scope.name= "Hello World";
  });
</script>

第二段：

ng-bind指令可以将指定的数据绑定到HTML页面上对应的元素中去，这样可以将数据在需要的时候动态地显示到页面上。

 // 示例代码-2
<div ng-app="myApp" ng-controller="myCtrl">
  <h2 ng-bind="firstName"></h2>
  <h2 ng-bind="lastName"></h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});
</script>

第三段：

ng-repeat指令可以将一个数组的数据逐一绑定到页面上的元素上，可以用来循环遍历数据等场景中。

 // 示例代码-3
<div ng-app="">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

<script>
angular.module('', []).controller('', function($scope) {
  $scope.names = ["Google", "Microsoft", "Apple"];
});
</script>

第四段：

ng-show和ng-hide指令可以用来在特定的条件下隐藏或显示页面上的元素，从而控制页面显示的内容。

 // 示例代码-4
<div ng-app="myApp" ng-controller="myCtrl">
    <p ng-show="myVar">这是一段要显示的文本。</p>
    <p ng-hide="myVar">这是一段要隐藏的文本。</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myVar = true;
});
</script>