AngularJS技术问询：点击区块为内部输入框赋值的实现方案

嘿，我太懂你想摆脱jQuery、切换到Angular思维模式的心情了——这正是AngularJS设计的核心：数据驱动视图，而不是像jQuery那样直接操作DOM。咱们直接用纯Angular的方式解决你的需求，完全不需要碰jQuery！

核心思路：拥抱双向绑定，让数据主导一切 #

AngularJS的双向绑定(ng-model)会帮你自动同步模型和视图。所以你不需要去查找输入框元素、修改它们的值，只需要维护好你的数据模型，视图会自动跟着更新。

具体实现步骤 #

1. 定义数据模型：把每个区块的输入框值都存在控制器的数组里，每个数组元素对应一个区块。
2. 用ng-repeat生成DOM：遍历数据数组，自动创建每个区块和内部的输入框。
3. 绑定点击事件到方法：点击区块文本时，调用控制器里的方法直接更新对应模型的值——Angular会自动把这个值同步到输入框。

代码示例 #

控制器代码

angular.module('myApp', [])
  .controller('BlockController', function($scope) {
    // 初始化区块数据，每个对象对应一个区块的输入框值
    $scope.blocks = [
      { id: 1, inputValue: '' },
      { id: 2, inputValue: '' },
      { id: 3, inputValue: '' }
    ];

    // 点击区块时触发的方法，直接更新对应区块的模型值
    $scope.setInputValue = function(block) {
      // 这里可以根据你的需求设置常规值，比如根据区块ID生成不同内容
      block.inputValue = '默认值-' + block.id;
    };
  });

HTML视图代码

<div ng-app="myApp" ng-controller="BlockController">
  <!-- ng-repeat遍历每个区块，每个区块绑定对应的模型 -->
  <div ng-repeat="block in blocks" class="block" ng-click="setInputValue(block)">
    <!-- 点击这段文本就会调用方法更新输入框值 -->
    <p>点击我设置输入框的值</p>
    <!-- 输入框双向绑定到block的inputValue，数据变化会自动同步 -->
    <input type="text" ng-model="block.inputValue">
  </div>
</div>

为什么这是Angular的正确姿势？ #

• 完全避免了DOM操作：你不需要像jQuery那样$(element).find('input').val('xxx')，所有逻辑都围绕数据模型展开。
• 逻辑和视图解耦：所有的业务逻辑（比如设置什么常规值）都在控制器里，视图只负责展示和绑定事件，代码更易维护和测试。
• 利用Angular的双向绑定特性：模型更新后，视图会自动刷新，你不用手动处理同步问题。

如果你的“常规值”有更复杂的逻辑（比如从服务器获取、根据其他状态动态生成），只需要在setInputValue方法里修改对应的逻辑即可，完全不需要改动DOM相关的代码。

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