0

Как создавать динамические элементы в AngularJS, если шаблон приходит с сервера в JSON формате, в данном случае $scope.form, к примеру:

<body ng-app="MyMod" ng-controller="MyCtrl">
    <div ng-repeat="el in from">
        <my-build-form></my-build-form>
    </div>
</body>

<script>
    angular.module('MyMod', []).directive('myBuildForm', function() {
        return {
            restrict: 'E',
            template: '<{{el.tagName}} type=text>'
        }
    }).controller('MyCtrl', function($scope) {
        $scope.from = [
            {'tagName': 'input', name: 'login', attrs: { max: 100, min: 30 }},
            {'tagName': 'input', name: 'pwd', attrs: { max: 60, min: 30 }}
        ]
    })
</script>

И ещё одни вопрос: как можно было отрисовать атрибуты, что-то вроде такого:

'<' + element.tagName +  + {{ for (attr in element.attrs) это записать как строчку 'attr = element.attrs[attr]' }} + '>'
14
  • что именно приходит с сервера в json?
    – Grundy
    25 ноя 2015 в 13:45
  • если не ошибаюсь значение темплейта может быть функцией которая возвращает строку
    – Grundy
    25 ноя 2015 в 13:46
  • "elements": [ { "tagName": "input", "attrs": { "type": "number", "max": 158, "min": 6, "require": true } }, { "tagName": "input", "attrs": { "type": "number", "max": 91, "min": 3, "require": false } },} 25 ноя 2015 в 13:46
  • в пост это добавь
    – Grundy
    25 ноя 2015 в 13:46
  • добавляю таким способом template: '<{{el.tagName}} type=text>', оно тупо выводит такой тест '<input type=text>', а не элемент, а мне нужно чтобы вставлялся элемент дом, мне просто потом нужно добавить ng-model, чтобы ангуляр спасил, если буду делать через jquery, то angular не будет видеть эту модель, тк ангулярь парсит и отображает до jquery 25 ноя 2015 в 13:52

1 ответ 1

1

Ангуляр предоставляет сервис $compile, который позволяет скомпилировать строку или html элемент в шаблон, который потом можно связать со скопом.

В вашем случае - собираем строку, отправляем ее в сервис, и связываем с нужным скопом.

Например так:

angular.module('MyMod', [])
  .directive('myBuildForm', ['$compile',
    function($compile) {
      return {
        restrict: 'E',
        link: function(scope, element) {
          element.append('<' + scope.el.tagName + ' type="text" ng-model="el.' + scope.el.name + '" ' + scope.el.attrs.toString() + '>');
          $compile(element.contents())(scope);
        }
      };
    }
  ])
  .controller('MyCtrl', function($scope) {
    $scope.from = [{
      'tagName': 'input',
      name: 'login',
      attrs: ['max=100 min=30 required']
    }, {
      'tagName': 'input',
      name: 'pwd',
      attrs: ['max=60 min=30 required']
    }]
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="MyMod" ng-controller="MyCtrl">
  <div ng-repeat="el in from">
    <div>{{el.name}} = {{el[el.name]}}</div>
    <my-build-form></my-build-form>
  </div>

</div>

UPDATE: пример с формой.

angular.module('MyMod', [])
  .directive('myBuildForm', ['$compile',
    function($compile) {
      return {
        restrict: 'E',
        link: function(scope, element) {
          element.append('<' + scope.el.tagName + ' type="text" ng-model="el.' + scope.el.name + '" ' + scope.el.attrs.toString() + '>');
          $compile(element.contents())(scope);
        }
      };
    }
  ])
  .controller('MyCtrl', function($scope) {
    $scope.from = [{
      'tagName': 'input',
      name: 'login',
      attrs: ['ng-maxlength="5" ng-minlength="1" required']
    }, {
      'tagName': 'input',
      name: 'pwd',
      attrs: ['ng-maxlength="5" ng-minlength="1" required']
    }, ];

    $scope.check = function($event) {
      $event.preventDefault();
      if(!$scope.myForm.$invalid){
        console.log('success');
      }else{
        console.log('invalid');
      }
    }

  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="MyMod" ng-controller="MyCtrl">
<form action="" name="myForm" novalidate>
      <div ng-repeat="el in from">
      <my-build-form></my-build-form>
    </div>
    <button type="submit" ng-disabled="myForm.$invalid" ng-click="check($event)">Confirm</button>
    </form>
    <div ng-show="login">
      login : {{login}}
    </div>
    <br>
    <div ng-show="pwd">
      password : {{pwd}}
    </div>
    
    {{myForm.$invalid}}

</div>

9
  • я обернул div с ng-repeat в форму, и форма не видит модели, у ангуляра есть своя валидация, и получается, что форма всегда невалидна, приходится писать функцию которая фалидирует форму. К примеру если написать <button ng-disabled="form.$invalid">, то такой подход не будет работать, и приходится писать <button on-click="checkFrom()"> 26 ноя 2015 в 7:07
  • @KhoteyVitaliy, сделай конкретный пример с формой, что ты пробовал и что не получается. По примеру который в посте - все работает
    – Grundy
    26 ноя 2015 в 7:10
  • <form action="" name="myForm" novalidate> <div ng-repeat="el in from"> <my-build-form></my-build-form> </div> <button type="submit" ng-disabled="myForm.$invalid" ng-click="check($event)">Confirm</button> </form> приходится руками валидировать форму через функцию :$scope.check = function ($event) { $event.preventDefault(); if ($scope.login && $scope.pwd) { alert('success'); } if (!$scope.login && !$scope.pwd) { alert('invalid form'); } } 26 ноя 2015 в 7:11
  • @KhoteyVitaliy, код добавляй в пост, и в идеале сразу планкер с ним :)
    – Grundy
    26 ноя 2015 в 7:11
  • Вижу что в комментариях плохо писать код) plnkr.co/edit/K03BBlB6Y3fLb9IRSAvP?p=info 26 ноя 2015 в 7:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.