Добавить динамический HTML для нескольких элементов в форму Angularjs и использовать его в области при нажатии кнопки

Question

Добавить динамический HTML для нескольких элементов в форму Angularjs и использовать его в области при нажатии кнопки

0

У меня есть эта форма:

 <h4>Now lets break it down. Tell us about the users.</h4>
            <div id="user1">
                <p class="bold">User #1</p>
                <label>User type:</label>
                <input type="radio" name="user-type" value="commercial" checked> Commercial &nbsp;<input type="radio" name="trial" value="trial"> Trial<br/>

                <div id="commectial-user">
                    <label>User Name:</label>
                    <input type="text" name="user-name">
                    <label>Email:</label>
                    <input type="text" name="email">
                    <label>Password:</label>
                    <input type="password" name="password">
                    <label>Name:</label>
                    <input type="text" name="name">
                    <button id="next-user" class="smallbutton">Click here to add another user if applicable….</button>
                    <br/><br/>
                </div>
            </div>

Это будет частью более крупной угловой формы, но я хочу, чтобы пользователь мог добавить несколько форм для добавления пользователя в форму. Так, например, если пользователь нажимает кнопку с идентификатором следующего пользователя, я хочу отобразить те же поля, но затем иметь различные значения для нового пользователя, когда будет происходить операция сохранения.

В общем, у меня есть два вопроса:

Как я могу добавить несколько HTML-форм, таких как эта по нажатию кнопки в угловой
Как только пользователь нажмет кнопку "Сохранить", как я могу получить данные из нескольких форм, таких как приведенная выше?

Laziale 29 июнь 2016, в 20:32

Источник

0

var newElm = $compile('<element></element>')($scope); var parent= document.getElementById('element'); angular.element(parent).append(newElm); как то так будет работать.
John Halbert 29 июнь 2016, в 18:17
0

где и как я должен использовать этот код? Спасибо
Laziale 29 июнь 2016, в 18:23
0

Это все будет в вашем контроллере, внутри функции. И вы могли бы добавить функцию в ng-щелчок на кнопке у вас в форме, чтобы добавить больше пользователей.
John Halbert 29 июнь 2016, в 18:29
0

Как я могу назначить соответствующие переменные области видимости для каждой из этих форм? Спасибо
Laziale 29 июнь 2016, в 18:33
0

Для этого и вызывается функция $ compile. Вы можете передать ваш html в виде строки и установить любые специфичные для angular атрибуты / директивы, которые вам нравятся, и после компиляции angular узнает, как использовать их в представлении.
John Halbert 29 июнь 2016, в 18:45
0

Как выглядит ваша модель? Это коллекция (массив) пользовательских объектов? Если это так, вы можете выполнить это, используя функцию js для добавления пользователей и ng-repeat для визуализации коллекции пользователей, не прибегая к каким-либо манипуляциям с DOM в коде.
jbrown 29 июнь 2016, в 18:47
0

@JohnHalbert спасибо, я попробую. jbrown это коллекция пользовательских объектов да. массив пользовательских объектов. У вас есть образец, который я могу использовать в качестве руководства? Спасибо
Laziale 29 июнь 2016, в 18:50
1

@Laziale - да, я работаю над поршнем, который является чисто AngularJS. Я поделюсь этим в ближайшее время.
jbrown 29 июнь 2016, в 18:51

Показать ещё 6 комментариев

Теги:

jquery

angularjs

angularjs-scope

angularjs-directive

1 ответ

Ещё вопросы

var newElm = $compile('<element></element>')($scope); var parent= document.getElementById('element'); angular.element(parent).append(newElm); как то так будет работать.
где и как я должен использовать этот код? Спасибо
Это все будет в вашем контроллере, внутри функции. И вы могли бы добавить функцию в ng-щелчок на кнопке у вас в форме, чтобы добавить больше пользователей.
Как я могу назначить соответствующие переменные области видимости для каждой из этих форм? Спасибо
Для этого и вызывается функция $ compile. Вы можете передать ваш html в виде строки и установить любые специфичные для angular атрибуты / директивы, которые вам нравятся, и после компиляции angular узнает, как использовать их в представлении.
Как выглядит ваша модель? Это коллекция (массив) пользовательских объектов? Если это так, вы можете выполнить это, используя функцию js для добавления пользователей и ng-repeat для визуализации коллекции пользователей, не прибегая к каким-либо манипуляциям с DOM в коде.
@JohnHalbert спасибо, я попробую. jbrown это коллекция пользовательских объектов да. массив пользовательских объектов. У вас есть образец, который я могу использовать в качестве руководства? Спасибо
@Laziale - да, я работаю над поршнем, который является чисто AngularJS. Я поделюсь этим в ближайшее время.

jbrown · Accepted Answer · 2016-06-29T17-28-00.000Z

Чистый угловой способ сделать это - использовать функцию контроллера для добавления пользователей и ng-repeat, чтобы отобразить коллекцию пользователей, не прибегая к какой-либо манипуляции с DOM в коде. Здесь работает бухнуться

контроллер

app.controller('MainCtrl', function($scope) {
  $scope.users = [{
    username: 'jsmith',
    email: '[email protected]',
    password: '123456',
    name: 'John Smith',
    userType: 'commercial'
  }, {
    username: 'asmith',
    email: '[email protected]',
    password: '123456',
    name: 'Alice Smith',
    userType: 'trial'
  }, {
    username: 'dsmith',
    email: '[email protected]',
    password: '123456',
    name: 'David Smith',
    userType: 'commercial'
  }];

  $scope.addUser = function() {
    var newUser = {
      username: '',
      email: '',
      password: '',
      name: '',
      userType: 'commercial'
    };
    $scope.users.push(newUser);
  };
});

HTML

<div ng-repeat="user in users">
  <p class="bold">User {{$index+1}}</p>
  <label>User type:</label>
  <input type="radio" ng-model="user.userType" value="commercial"> Commercial &nbsp;
  <input type="radio" ng-model="user.userType" value="trial"> Trial
  <br/>

  <div>
    <div>
      <label>User Name:</label>
      <input type="text" ng-model="user.username">
    </div>
    <div>
      <label>Email:</label>
      <input type="text" ng-model="user.email">
    </div>
    <div>
      <label>Password:</label>
      <input type="password" ng-model="user.password">
    </div>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="user.name">
    </div>
    <br/>
   </div>
</div>
<div>
   <button class="smallbutton" ng-click="addUser()">Click here to add another user if applicable….</button>
</div>

Работает отлично, спасибо большое