Question

这是我的问题：我有一个按钮，我可以添加动态输入。并且专门添加一个带有div元素的textarea，其中包含textarea中字符的计数器。问题是角标签呈现为普通的html文本。

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>

Answer 1

这不是一个答案，但这个简单的例子有望帮助您理解“角度思维”。

AngularJS与JQuery的不同之处在于您的视图完全依赖于您的数据结构。数据中的更改将反映在视图中的更改，就像视图中的更改可能反映在数据更新中一样。这一切都是通过一种称为数据绑定的机制完成的。我不是很善于解释这么简单的例子。此外，你应该真正研究数据绑定，ViewModel模式和Angular。你会看到，谢天谢地，你不需要Jquery。

因此，要实现您想要的效果，您需要在控制器中保存一组对象，并通过单击按钮将新项目推送到它。此数组将存储具有您要存储的属性的对象，如ID，NAME等。每个属性都将绑定到输入，以便可以编辑它们。

以下是我要解释的一个例子。

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>

请查看此问题以获取更多信息

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

将角度渲染为字符串

1 个答案: