你能帮忙解决这个逻辑问题吗？

Question

exampleDEMO

您可以在链接上方查看代码。

其实我是想根据按钮组的输入来控制所有与按钮组名称相同的输入形式。

例如，我在“First”按钮右侧的输入表单中输入值，

同时，所有名称为“First”的输入表单都应更改

只有按钮组输入一个。

对不起，我的英语水平很差，希望你能理解！

<div ng-app="app" ng-controller="AppCtrl">
// list group
  <div>
    <ul>
      <li ng-repeat="item in items">
        <span>{{item.name}}</span>
        <input type="text" ng-model="price">
      </li>
    </ul>
  </div>


// button group
  <div>
    <ul class="list-btn">
      <li ng-repeat="btn in btns">
        <button>{{btn}}</button>
        <input type="text" ng-model="price_all">    
      </li>
    </ul>
  </div>  
</div>


angular.module('app', [])
.controller('AppCtrl', ['$scope', function ($scope) {
    $scope.items = [
    {id: 1, name: 'First'},
    {id: 2, name: 'Second'},
    {id: 3, name: 'Third'},
    {id: 4, name: 'First'},
    {id: 5, name: 'Second'},
    {id: 6, name: 'Third'},
    {id: 7, name: 'First'},
    {id: 8, name: 'Second'},
    {id: 9, name: 'Third'},
  ]

  $scope.btns = ['First', 'Second', 'Third'];

}])

Answer 1

由于 ng-model 在 li 标签中重复出现，双向绑定只能在该 li 标签内部起作用，而不是在它外部。所以，你需要使用 onkeyup 事件。

提琴手中的工作解决方案 - https://jsfiddle.net/fcoLmd2n/

在 html 中进行这些更改：

<li ng-repeat="item in items">
    <span>{{item.name}}</span>
    <input type="text" class="{{item.name}}" ng-model="price">
  </li>

<li ng-repeat="btn in btns">
    <button>{{btn}}</button>
    <input type="text" btnType="{{btn}}" ng-model="price_all" onkeyup="Update(this);">
</li>

Js文件的变化：

function Update(obj)
{
    var className = obj.getAttribute('btnType');
    var txtBoxElements = document.getElementsByClassName(className);
    for(var i=0;i<txtBoxElements.length;i++)
    {
        txtBoxElements[i].value= obj.value
    }
}

使用 Jquery 进行优化