この論理的な問題を解決するのに役立つでしょうか？

Question

exampleDEMO

リンクの上にコードが表示されます。

実際、ボタングループの入力に従って、ボタングループ名と同じ名前の入力フォームをすべて制御したいと考えています。

例えば、私は名前を「最初の」入力フォームのすべてがちょうどで

を変更する必要があり、

と同時に、「最初の」ボタン右側の入力フォームに値を入れますボタングループ入力1。

私の貧しい英語のスキルには申し訳ありませんが、あなたがそれを理解できることを願っています！

<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タグの内部でのみ動作し、その外側では動作しません。したがって、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