Не могли бы вы помочь решить эту проблему логики?

0

пример DEMO

Вы можете увидеть код выше ссылки.

Фактически, я хочу, чтобы в соответствии с вводом группы кнопок, чтобы управлять всей формой ввода, имя которой совпадает с именем группы кнопок.

Например, я поместил значение в форму ввода на правой кнопке "Первая",

и в то же время вся форма ввода, имя которой "Первое" должно быть изменено

с одним нажатием кнопки группы.

Извините за мое плохое английское умение, надеюсь, вы сможете это понять!

<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'];

}])
  • 0
    Не могли бы вы поставить код в сообщении? jsFiddle - это круто, но лучше поставить код в вопросе
  • 0
    Вам нужно нажать на кнопку, чтобы отразить изменение или мгновенно?
Показать ещё 7 комментариев
Теги:

1 ответ

0
Лучший ответ

Поскольку 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 для оптимизации

Поделиться
  • 0
    Да, я также подумал, что мне следует использовать jquery для управления им. Спасибо миллион!
  • 0
    Я просто дал вам логику. Вы можете настроить в соответствии с вашими потребностями, а также использовать JQuery. Удачного кодирования!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню