AngularJS技术问询：如何复用输入模型及根据复选框控制输入框禁用

我来帮你搞定这个问题！你现在的核心问题是没有把复选框的状态和输入框的禁用状态做双向绑定，而且因为是从数组循环渲染的，得确保每个项的状态是独立的，不能共用一个全局变量。下面是具体的解决方案：

第一步：调整控制器中的数组结构 #

首先，给你数组里的每个对象添加一个布尔属性（比如isChecked），用来存储对应复选框的选中状态。这样每个项的状态都是独立的，不会互相干扰：

angular.module('app', [])
  .controller('MainCtrl', function($scope) {
    // 假设这是你原来的控制器数组，现在添加isChecked属性
    $scope.items = [
      { label: "选项1", isChecked: false },
      { label: "选项2", isChecked: false },
      { label: "选项3", isChecked: false }
    ];
  });

第二步：修改模板中的绑定逻辑 #

把复选框的ng-model绑定到当前项的isChecked属性，然后让输入框的ng-disabled动态依赖这个属性。这里分两种常用场景：

• 如果复选框选中时启用输入框，那么ng-disabled用!item.isChecked
• 如果复选框选中时禁用输入框，直接用item.isChecked

下面是完整的模板代码：

<!DOCTYPE html>
<html ng-app="app">
<head>
  <script src="https://code.angularjs.org/1.3.0-beta.5/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
  <div ng-repeat="item in items">
    <span>
      <input type="checkbox" ng-model="item.isChecked"> {{item.label}}
    </span>
    <span>
      <!-- 示例为：复选框选中时启用输入框，未选中时禁用 -->
      <input type="text" ng-disabled="!item.isChecked" placeholder="输入内容...">
    </span>
  </div>
</body>
</html>

关键逻辑解释 #

1. 双向绑定：AngularJS的ng-model会自动同步复选框的选中状态到item.isChecked属性，完全不需要手动写事件监听。
2. 实时更新：ng-disabled会实时监听item.isChecked的变化，一旦用户点击复选框，输入框的禁用状态会立即同步更新。
3. 独立状态：每个项都有专属的isChecked属性，多个复选框和输入框之间不会互相干扰，完全适配数组循环渲染的场景。

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