CODEWITHSUNDEEP
angularjs
Вилислав Венков
Вилислав Венков

Reputation: 227

Render angular as string

Here is my problem: I have a button, with I can add dynamically inputs.And specifically add a textarea with div element above it which contains a counter for chars in textarea.The problems is that angular tags are rendering as ordinary html text.

mainController :

   var validationApp = angular.module('validationApp', []).config(function ($interpolateProvider) {
    $interpolateProvider.startSymbol('<%').endSymbol('%>');
});

validationApp.controller('mainController', function ($scope, $compile) {

var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".activities_wrap"); //Fields wrapper
var add_button = $(".my-add_field_button"); //Add button ID
var x = 0; //initlal text box count
var elements = "<div class=\"char-counter\">Остават Ви <% (100 - projectManagement['project_management[0][activity]'].$viewValue.length) > 0 ? (100 - projectManagement['project_management[0][activity]'].$viewValue.length) : 0 %> символа" + +"</div>" +
    "<div><h3>Дейност #" + x + "</h3>" +
    "<textarea ng-model=\"project_management.activity" + x + "\" ng-maxlength=\"100\" name=\"project_management[" + x + "][activity]\" placeholder=\"Дейност\"></textarea>" +
    "<input class=\"from\" type=\"text\" name=\"project_management[" + x + "][from]\" placeholder=\"Начална дата\">" +
    "<input class=\"to\" type=\"text\" name=\"project_management[" + x + "][to]\" placeholder=\"Крайна дата\">" +
    "<input type=\"text\" name=\"project_management[" + x + "][place]\" placeholder=\"Място\">" +
    "<input type=\"text\" name=\"project_management[" + x + "][responsible_for_activity]\" placeholder=\"Отговорен за дейността\">" +
    "<input type=\"text\" name=\"project_management[" + x + "][count_participants]\" placeholder=\"Брой включени участници\">" +
    "<textarea type=\"text\" name=\"project_management[" + x + "][indicators_for_measure_of_activity]\" placeholder=\"Индикатори за измерване на дейността\"></textarea>" +
    "<br><a href=\"#\" class=\"font remove_field\">Премахни</a></div>";


$(add_button).click(function (e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
        x++; //text box increment
        $(wrapper).append(elements); //add input box

        $('.from, .to').datepicker({
            dateFormat: 'dd-mm-yy',
            dayNames: ["Понеделник", "Вторник", "Сряда", "Четвъртък", "Петък", "Събота", "Неделя"],
            dayNamesMin: ["Нд", "По", "Вт", "Ср", "Чт", "Пт", "Сб"],
            monthNames: ["Януари", "Февруари", "Март", "Април",
                "Май", "Юни", "Юли", "Август", "Септември",
                "Октомври", "Ноември", "Декември"]
        }).val();
        $compile(elements)($scope);
    }
});

$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
})
});

HTML :

<fieldset ng-form="projectManagement">

<div class="activities_wrap">
    <button class="action-button my-add_field_button">Добави дейност</button>
</div>

<input type="button" name="previous" class="previous action-button" value="Назад"/>
<input type="button" name="next" class="next action-button" ng-disabled="projectManagement.$invalid" value="Напред"/>
<script>
    $('.from, .to').datepicker({
        dateFormat: 'dd-mm-yy',
        dayNames: ["Понеделник", "Вторник", "Сряда", "Четвъртък", "Петък", "Събота", "Неделя"],
        dayNamesMin: ["Нд", "По", "Вт", "Ср", "Чт", "Пт", "Сб"],
        monthNames: ["Януари", "Февруари", "Март", "Април",
            "Май", "Юни", "Юли", "Август", "Септември",
            "Октомври", "Ноември", "Декември"]
    }).val();
</script>

Upvotes: 0

Views: 71

Answers (1)

Renan Ferreira
Renan Ferreira

Reputation: 2150

This is not exactly an answer, but a simple example that will, hopefully, help you understand the "angular thinking".

AngularJS is different that JQuery in a way that your view is completely dependent of your data structure. Changes in your data will reflect in view changes, in the same way that, changes in the view may reflect in an update to your data. This is all done by a mechanism called Data-Binding. I'm not that good at explaining so a made a simple example. Besides, you should really study about Data-Binding, ViewModel pattern and Angular in general. You will see that, thankfully, you will not need Jquery for much.

So, to achieve what you want, you need to hold an array of objects in your controller, and push new items to it with the click of a button. This array will store objects with the properties you want to store, like ID, NAME, etc. Each of those properties will be binded to a input, so that they can be edited.

Here is an example of what I'm trying to explain.

https://jsfiddle.net/relferreira/42zrn2t2/1/

JS

angular.module('app', []);

angular.module('app')
    .controller('MainController', mainController);

mainController.$inject = ['$scope'];

function mainController($scope){

    var vm = this;
  vm.itemsList = [];
  vm.addItem = addItem;

  function addItem(){
    vm.itemsList.push({});
  }

}

HTML

<div data-ng-app="app">

  <div data-ng-controller="MainController as mainVm">
    <button data-ng-click="mainVm.addItem()">ADD</button>
    <table>
      <thead>
        <th>ID</th>
        <th>Name</th>
      </thead>
      <tbody>
        <tr data-ng-repeat="item in mainVm.itemsList">
          <td><input type="number" data-ng-model="item.id"></td>
          <td><input type="text" data-ng-model="item.name"></td>
        </tr>
      </tbody>
    </table>
    {{mainVm.itemsList}}
  </div>

</div>

Take a look at this question for more information

"Thinking in AngularJS" if I have a jQuery background?

Upvotes: 2

Related Questions