AngularJS передача данных

0

У меня есть следующее приложение AngularJS.

Из $scope.forms я создаю некоторые входы в html-часть, используя ng-repeat.

То, что я не понимаю, - это то, как выталкивать данные из attributes: ["title", "firstname", "lastname", "address"] input в values: []

Может ли кто-нибудь объяснить мне, как вставлять входные значения в мой ключ значений? Или, может быть, если есть лучшее решение для объяснения?

function sampleCtrl($scope) {

  $scope.forms = [
    {
      title: "Something",
      attributes: ["title", "firstname", "lastname", "address"],
      values: [] //here i want the values from the attributes
    },
    {
      title: "Something else",
      attributes: ["title", "name", "job", "address"],
      values: [] //here i want the values from the attributes
    }   ]; }

http://jsfiddle.net/U3pVM/18198/

Теги:

4 ответа

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

См. Ответ @Grundy для прямого подхода, когда вам не нужно менять свою модель.

Позвольте мне предложить другой подход, хотя (это также включает в себя тот факт, что вам нужно использовать ng-model для привязки input value): моделируйте комбинацию атрибут + значение как реальную вещь. Итак, например:

$scope.forms = [
    {
        title: "Something",
        pairs: [{label: "title", value: ""}, {label: "firstname", value: ""}]
    }
];

Эта модель обзора гораздо проще привязать в представлении:

<div ng-repeat="pair in form.pairs">
    <input type="text" placeholder="{{pair.label}}" ng-model="pair.value" />
</div>

Причина, по которой я предлагаю это, состоит в том, что область $scope works лучше всего подходит для ИМО, если она скроена для привязки к представлениям. Если вам нужен другой формат (т. values Массив values), возможно, чтобы отправить его обратно в сервисную службу, лучше всего отобразить модель представления в соответствующий формат данных. Например:

var values = $scope.forms[0].pairs.map(function(p) {
    return p.value;
});

См. Эту раздвоенную скрипку для полного примера.

Поделиться
  • 0
    Вы качаетесь, спасибо!
2

Вы должны увидеть о ng-модели. в качестве модели вы можете использовать values[$index] поэтому в values массива значений в том же порядке, что и в attributes.

function sampleCtrl($scope) {

  $scope.forms = [
    {
      title: "Something",
      attributes: ["title", "firstname", "lastname", "address"],
      values: [] //here i want the values from the attributes
    },
    {
      title: "Something else",
      attributes: ["title", "name", "job", "address"],
      values: [] //here i want the values from the attributes
    }
  ];

}
body {
    font-family: courier new;
}

h1 {
    font-size: 24px;
    margin: 0 0 20px;
}

h2 {
    font-size: 18px;
}

.form {
    margin: 0 0 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <h1>Form</h1>
    <div ng-controller="sampleCtrl">
      
        <div class="form" ng-repeat="form in forms">
          <h2>{{form.title}}</h2>     
          <div ng-repeat="input in form.attributes">
              <input type="text" ng-model="form.values[$index]" placeholder="{{input}}" />
          </div>
            {{form.attributes}}
            {{form.values}}
        </div>
      
    </div>
  </div>
Поделиться
  • 0
    Да, +1, аналогично моему решению, только один, где OP не придется изменять текущий формат $scope с двумя отдельными массивами.
  • 1
    @Jeroen, да, в некоторых случаях мы не можем изменить структуру :-) В любом случае главная проблема OP - он не использует ng-model :-)
1

Я добавил изменения к вашей скрипке:

<div ng-app>
    <h1>Form</h1>
    <div ng-controller="sampleCtrl">

        <div class="form" ng-repeat="form in forms">
          <h2>{{form.title}}</h2>     
          <div ng-repeat="input in form.attributes" ng-init="mod = []">
              <input type="text" placeholder="{{input}}" ng-init="mod[$index] = form.values[$index]" ng-model="mod[$index]"/>
          </div>
       </div>     
   </div>
</div>

http://jsfiddle.net/U3pVM/18201/

Поделиться
  • 0
    почему вы используете так много нг-init? в этом случае при изменении значений на входе они не применяются к массиву values
  • 0
    Да уж. только что увидел ответ, это можно сделать с помощью массива form.values. Я думал, что нам понадобится другой массив для хранения значения, но я был наивен. : 3
Показать ещё 2 комментария
1

Это просто: вот обновленная скрипка

Просто добавлена ng-model которая указывает на тот же самый индекс в массиве attributes и в массиве values.

  <div ng-app>
    <h1>Form</h1>
    <div ng-controller="sampleCtrl">

        <div class="form" ng-repeat="form in forms">
          <h2>{{form.title}}</h2>     
          <div ng-repeat="input in form.attributes">
              <input type="text" ng-model="form.values[$index]"  placeholder="{{input}}" />
          </div>
        </div>
        <button ng-click="haha()">Test!</button>
    </div>
  </div>

И никаких изменений в JS. Добавлена новая функция haha() чтобы проверить ее

function sampleCtrl($scope) {

  $scope.forms = [
    {
      title: "Something",
      attributes: ["title", "firstname", "lastname", "address"],
      values: [] //here i want the values from the attributes
    },
    {
      title: "Something else",
      attributes: ["title", "name", "job", "address"],
      values: [] //here i want the values from the attributes
    }
  ];

    $scope.haha = function(){
        console.log($scope.forms);
    }

}
Поделиться
  • 0
    у тебя есть разница с моим ответом, кроме haha ? :-)
  • 0
    Нет. :) Я не читал твой ответ, прежде чем опубликовать свой. :)

Ещё вопросы

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