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

Question

exampleDEMO

你可以看到上面的代码链接。

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

例如，我把值到输入表单上的“第一”按钮右侧，

，并在同一时间，所有的输入形式名称“第一”的应改变

只按钮组输入一个。

对不起，我的英语能力差，希望你能理解它！

<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模型是insisde li标签重复的，双向绑定只能在该li标签内工作，而不能在其外部使用。所以，你需要使用onkeyup事件。在fiddlder

工作液 - 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优化