在父div上单击时需要在单个div内添加具有相同内容的多个div

Question

Here is my piece of code, a function to add a meal template: 这是我的代码，一个添加进餐模板的函数：

vm.addMealTemplate = function() {

$scope.mealCount++;
$compile( $(document.createElement('div')).attr("id", 'mealDiv' + $scope.mealCount).addClass("mealDiv"+$scope.mealCount).after().html(
          '<select ng-options="(option.name ) for option in mealOptions" ng-model="selectedOption'+ $scope.mealCount+'" />' +
          '<input type="text" placeholder="Meal timings" id="time'+ $scope.mealCount +'"/>' +
          '<a id="mealCount" ng-class="mealCount" ng-click="addItemCategory()" uib-tooltip="Add category" tooltip-trigger="mouseenter" tooltip-placement="bottom"><i class="fa fa-plus"></i></a>'
        ).appendTo("#meals")
       // $("#meals").append(newMealDiv)
        )($scope);
      }

On clicking calling the addItemCategory() for the specific div , I want another div to get added as a child of that div . 在单击调用特定div的addItemCategory() ，我希望将另一个div作为该div的子级添加。 There can be mutiple meal templates, and for each template I can call the addItemCategory mutliple times, and I want the category to be added to the same div for which the function has been called. 可以有多个进餐模板，对于每个模板，我可以调用addItemCategory多个时间，并且我希望将类别添加到调用该函数的同一div中。 How do I achieve this? 我该如何实现？

Currently I am using mealCount variable from scope to have the context, but once it gets increased, I have no way to access the divs added previously, to add the new element to that div. 目前，我正在使用mealCount变量来获取上下文，但是一旦增加它，就无法访问之前添加的div，无法向该div添加新元素。 Any way using jQuery or AngularJs? 任何使用jQuery或AngularJs的方式吗？

Answer 1

You can use ng-repeat 您可以使用ng-repeat

For example: 例如：

 angular.module('app', []). controller('ctrl', function($scope) { $scope.meals = []; });

 .meal { border:1px solid; padding:10px; margin-bottom:10px; }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <div ng-repeat="meal in meals" class="meal"> <select ng-model="meal.count"> <option>1</option> <option>2</option> <option>3</option> </select> <input type="text" placeholder="Meal timings" ng-model="meal.timing" /> <div> <div>Categories:</div> <div ng-repeat="cat in meal.categories track by $index"> <input type="text" ng-model="meal.categories[$index]" /> </div> <button ng-click="meal.categories.push('')">Add Category</button> </div> </div> <button ng-click="meals.push({categories:[]})">Add meal</button> <hr /> {{meals | json}} </div>

Note: I changed the models etc. it's just example.. 注意：我更改了模型等。这只是示例。

Answer 2

Here's an example Plunker on how your problem can be solved with ng-repeat in Angular: 下面是一个示例Plunker，说明如何使用Angular中的ng-repeat解决您的问题：

http://plnkr.co/edit/POt7nFc4GqFU67SWdMp7?p=preview http://plnkr.co/edit/POt7nFc4GqFU67SWdMp7?p=preview

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.angularjs.org/1.5.5/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="restaurant" ng-controller="meal-controller">
    <div ng-repeat="meal in meals track by $index">
      <select ng-options="option.name for option in mealOptions" ng-model="meal.selectedMeal"></select>
      <input type="text" placeholder="Meal timings" id="{{'time'+ $index }}" ng-model="meal.timing"/>
      <a id="mealCount" ng-class="mealCount" ng-click="addItemCategory()" uib-tooltip="Add category" tooltip-trigger="mouseenter" tooltip-placement="bottom"><i class="fa fa-plus"></i></a>
    </div>

    <button ng-click="addMeal()">Add meal</button>
  </body>

</html>

- --

// Script.js

angular.module('restaurant', [])
    .run( ['$rootScope', function( $rootScope )  {
    }]
);


angular.module('restaurant').controller('meal-controller', [ '$scope', function( $scope ) {

  $scope.meals = [];

  $scope.mealOptions = [{ name: "option1"}, { name: "option2"}, { name: "option3" } ];

  $scope.addMeal = function() {
    $scope.meals.push({ selectedMeal: null, timing: "timing" });
  }

  $scope.addItemCategory = function() {

  }
}]);

I am not entirely sure about how you want the logic to work, but I am sure that you can modify this example to fit your needs. 我不确定您希望逻辑如何工作，但是我可以确定可以修改此示例以适合您的需求。

Ng-repeat works like a loop which prints the content it is wrapping until the end of the array. Ng-repeat就像循环一样，将循环包装的内容打印到数组的末尾。 Ng-repeat has a lot of features like tracking elements in the array by index, this can used to (like in the example) give each input an unique id. Ng-repeat具有很多功能，例如按索引跟踪数组中的元素，这可以用来（如示例中一样）为每个输入赋予唯一的ID。

If you need to make some specific changes to a meal, you can pass it as an argument, for example if you want to delete a specific meal you can have a button inside the ng-repeat like this: 如果您需要对餐点进行一些特定的更改，则可以将其作为参数传递，例如，如果您要删除特定餐点，则可以在ng-repeat中添加一个按钮，如下所示：

<button ng-click="deleteMeal(meal)">Delete Meal</button>

This means that you do not have to access the meal specifically by, for example, its id with jQuery. 这意味着您不必通过例如jQuery的ID来直接访问该餐。

I would say it is not recommended to mix angular and jQuery the way you are doing now. 我会说不建议您按照现在的方式混合使用angular和jQuery。 Try to stick with Angular and avoid jQuery. 尝试坚持使用Angular并避免使用jQuery。 In some special cases where you need to do element specific modifications it can be achieved by using jQlite: 在某些特殊情况下，您需要进行元素特定的修改，可以使用jQlite来实现：

https://docs.angularjs.org/api/ng/function/angular.element https://docs.angularjs.org/api/ng/function/angular.element

在父div上单击时需要在单个div内添加具有相同内容的多个div

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-06-14 12:43:42

解决方案2
0 2016-06-14 12:59:03

在父div上单击时需要在单个div内添加具有相同内容的多个div

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-06-14 12:43:42

解决方案2 0 2016-06-14 12:59:03

解决方案1
0 已采纳 2016-06-14 12:43:42

解决方案2
0 2016-06-14 12:59:03