Angular JS：点击按钮时在Header中添加元素（附PLNKR代码示例）

没问题，我来帮你搞定这个需求！下面是完整的实现方案，基于你提供的代码基础进行了完善：

实现思路 #

• 用AngularJS的控制器管理Header元素的数据源
• 通过ng-click绑定按钮点击事件，触发添加元素的方法
• 用ng-repeat动态渲染Header中的元素列表

完整代码示例 #

<html ng-app='sampleApp'>
<head>
  <link data-require="bootstrap-css" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular-route.js" data-semver="1.4.9"></script>
  
  <script>
    // 定义AngularJS应用模块
    var app = angular.module('sampleApp', []);
    
    // 定义控制器
    app.controller('HeaderController', function($scope) {
      // 初始化Header元素数组
      $scope.headerItems = ['首页', '产品'];
      
      // 点击按钮添加元素的方法
      $scope.addItemToHeader = function() {
        // 这里可以自定义要添加的元素内容，比如随机生成或者固定文本
        var newItem = '新菜单' + ($scope.headerItems.length + 1);
        $scope.headerItems.push(newItem);
      };
    });
  </script>
</head>
<body ng-controller="HeaderController">
  <!-- Header区域 -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">示例应用</a>
      </div>
      <ul class="nav navbar-nav">
        <!-- 动态渲染Header元素 -->
        <li ng-repeat="item in headerItems"><a href="#">{{item}}</a></li>
      </ul>
      <!-- 添加按钮 -->
      <button class="btn btn-default navbar-btn" ng-click="addItemToHeader()">添加Header元素</button>
    </div>
  </nav>
</body>
</html>

关键代码解释 #

• 控制器逻辑：HeaderController里的headerItems数组用来存储所有Header元素，addItemToHeader方法负责往数组里追加新元素，AngularJS会自动触发视图更新。
• 视图绑定：ng-repeat="item in headerItems"会遍历数组，为每个元素生成一个导航项；ng-click="addItemToHeader()"把按钮点击事件和控制器里的方法绑定起来。
• 样式优化：用Bootstrap的导航栏样式让Header看起来更美观，你可以根据需求调整样式。

内容的提问来源于stack exchange，提问作者Basch