如何结合ng-repeat使用Angular UI Bootstrap日期选择器弹窗

我来给你一步步拆解怎么实现这个需求，结合你现有的待办事项代码，把Angular UI Bootstrap的日期选择器弹窗和ng-repeat完美结合起来。首先得确保你已经在项目中引入了AngularJS、Angular UI Bootstrap的核心文件（比如ui-bootstrap-tpls.js）以及对应的Bootstrap CSS样式，这是基础前提。

第一步：完善控制器逻辑，给待办项添加日期属性 #

首先我们需要在ToDoCtrl里初始化待办事项数组，并且给每个待办项增加dueDate（截止日期）属性，同时实现添加待办的方法时，把用户选择的日期一并存入：

angular.module('todoApp', ['ui.bootstrap'])
  .controller('ToDoCtrl', function($scope) {
    // 初始化待办事项数组，每个项包含文本、完成状态、截止日期
    $scope.todos = [
      { text: '完成项目文档', completed: false, dueDate: new Date() },
      { text: '提交代码PR', completed: true, dueDate: new Date('2024-05-20') }
    ];

    // 添加新待办的方法
    $scope.addTodo = function() {
      if ($scope.formTodoText && $scope.formDueDate) {
        $scope.todos.push({
          text: $scope.formTodoText,
          completed: false,
          dueDate: angular.copy($scope.formDueDate)
        });
        // 清空表单输入
        $scope.formTodoText = '';
        $scope.formDueDate = null;
      }
    };

    // 可选：切换待办完成状态的方法
    $scope.toggleCompleted = function(todo) {
      todo.completed = !todo.completed;
    };
  });

第二步：修改添加待办的表单，加入日期选择器弹窗 #

在你原有的添加表单里，增加日期选择器的输入框，使用uib-datepicker-popup指令绑定到formDueDate模型，同时配置必要的参数（比如日期格式、弹窗触发方式）：

<div class="task-manager_block" ng-controller="ToDoCtrl">
  <div class="form_block clearfix">
    <form name="addToDo">
      <!-- 原有的待办文本输入框 -->
      <input 
        class="add-input" 
        placeholder="I need to..." 
        type="text" 
        name="inputToDo" 
        ng-model="formTodoText" 
        ng-minlength="5" 
        ng-maxlength="40" 
        ng-required="true"
      />
      <!-- 新增的日期选择器弹窗 -->
      <input 
        type="text" 
        class="date-input"
        uib-datepicker-popup="yyyy-MM-dd"
        ng-model="formDueDate"
        is-open="datePickerOpened"
        ng-click="datePickerOpened = true"
        datepicker-options="{minDate: new Date()}"
        ng-required="true"
        close-text="Close"
      />
      <!-- 添加按钮，确保表单验证包含日期输入 -->
      <button 
        class="add-btn" 
        ng-click="addTodo()" 
        ng-disabled="!addToDo.$valid"
      >
        <h2>Add</h2>
      </button>
    </form>
  </div>

第三步：用ng-repeat渲染待办列表，展示/编辑日期 #

接下来用ng-repeat遍历todos数组，每个待办项里可以展示截止日期，甚至允许点击修改（同样使用日期选择器弹窗）：

<!-- 待办事项列表 -->
  <div class="todo-list">
    <div 
      class="todo-item clearfix" 
      ng-repeat="todo in todos track by $index"
      ng-class="{completed: todo.completed}"
    >
      <input type="checkbox" ng-click="toggleCompleted(todo)" ng-checked="todo.completed"/>
      <span class="todo-text">{{todo.text}}</span>
      <!-- 展示截止日期，同时允许点击修改 -->
      <input 
        type="text" 
        class="todo-date"
        uib-datepicker-popup="yyyy-MM-dd"
        ng-model="todo.dueDate"
        is-open="todo.dateOpened"
        ng-click="todo.dateOpened = true"
        datepicker-options="{minDate: new Date()}"
      />
      <span class="due-date-text">截止日期：{{todo.dueDate | date:'yyyy-MM-dd'}}</span>
    </div>
  </div>
</div>

关键细节说明 #

• is-open绑定：每个日期选择器弹窗需要独立的开关变量，对于新增表单用单个变量datePickerOpened，对于ng-repeat里的每个待办项，我们给每个todo对象添加dateOpened属性，避免点击一个弹窗时所有弹窗都打开。
• 日期格式化：通过uib-datepicker-popup="yyyy-MM-dd"指定输入框的日期显示格式，也可以用AngularJS的date过滤器在展示时格式化。
• 表单验证：确保日期输入框也加上ng-required="true"，这样添加按钮会在文本和日期都符合要求时才启用。
• track by $index：在ng-repeat里加上这个可以避免待办项内容重复时出现的渲染问题。

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