AngularJS динамически добавляет поля ввода и сохраняет ссылку на каждый

В настоящее время я пытаюсь выяснить, как сохранить ссылку на отдельные динамически добавленные поля ввода. У меня есть модальное всплывающее окно следующим образом:AngularJS динамически добавляет поля ввода и сохраняет ссылку на каждый

<div ng-controller="SamplesQueryController"> 
      <button ng-click="toggleModal()" class="btn-splash-small">Add Sample</button> 
      <modal title="Create New Sample" visible="showModal"> 
      <form role="form"> 
       Sample Name:<br> 
       <input type="text" ng-model="newSampleName.sampleName"> 
       <br> Attribute 1 Name:<br> 
       <input type="text" ng-model="newAtt1Name.att1Name"> 
       <br> Attribute 1 Value: <br> 
       <input type="text" ng-model="newAtt1Value.att1Value"> <br> 
       <button id="submitSample" ng-click="createSample();toggleModal()">Submit 
        Sample</button> 
       <button id="addAttribute">Add Attribute</button> 
       <button ng-click="toggleModal()">Close</button> 
      </form> 
      </modal> 
     </div>

, который в настоящее время имеет поле ввода для att1Name и att1Value, у меня есть кнопка AddAttribute, который должен добавить 2 новых поля ввода (для att2Name и att2Value). Я могу динамически создавать входы с использованием способа, такого как:

<input type="text" ng-repeat="myinput in myinputs" ng-model="myinput"> 
</input>

, но как можно сохранить ссылку на каждый из набрано значений в полях ввода и как можно создать 2 поля для каждого элемента в myinputs

Предпочтительно, я бы сохранил эти значения в какой-то структуре, например attributes.att1.name, attributes.att1.value, attributes.att8.name и т. Д.

источник

2016-02-04 GregH

см «Связывание с образованием и контролировать состояние» здесь: https://docs.angularjs.org/guide/forms – james

еще довольно потерял после перечитывая документ – GregH

Я думаю, что вы застреваете, потому что ваша модель домена ошибочна. Подумайте об образце с именем и массивом атрибутов. Каждый атрибут имеет имя и значение. Затем вы можете сопоставить свою модальную форму с образцом и в форме иметь атрибут ng-repeat = "в sample.Attributes". – twsaef

Вы хотите, чтобы ваша модель была как массив который содержит объекты, которые имеют свойства «имя» и «значение». Тогда это довольно легко создать нг-повтор DIV, который содержит 2 ввода текста поля:

<div ng-repeat="input in inputs"> 
    <input type="text" ng-model="input.l"> 
    <input type="text" ng-model="input.v"> 
</div>

Затем вы можете затем добавить поля, нажав вновь инициированный объект в $ scope.inputs.

function add() { 
    var obj = {attr1Name: '', attr1Value: ''}; 
    $scope.inputs.push(obj); 
}

Работа скрипку здесь: https://jsfiddle.net/ccvLhmps/

источник

2016-02-04 22:34:42 Roaringsheep

Я реализовал аналогичное решение, но хочу, чтобы у каждого поля ввода была другая нет-модель. Например, первая пара будет иметь input.l1 и input.v1, тогда как вторая пара input.l2 и input.v2 и так далее. Как это можно достичь? –

-1

<!DOCTYPE html> 
<html> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <body> 
     <h2>Cost Calculator</h2> 
     <p></p> 
     <p></p> 
     <p></p> 
     <div ng-app> 
     <input name="amount" ng-model="a" placeholder="Amount" /> 
     <input name="adjustment" ng-model="b" placeholder="Adjustment" />       
     <input name="advance" ng-model="c" placeholder="Total" value='{{ a-b}}' />        
     <input name="balance" placeholder="Total" readonly required value='{{ a-b-c}}' /> 
     </div> 
    </body> 
</html>

источник

2017-09-15 07:48:40 vinod

Пожалуйста, объясните свой ответ в контексте вопроса OP. – Jerrybibo

AngularJS динамически добавляет поля ввода и сохраняет ссылку на каждый

ответ

Смежные вопросы