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

Question

这是我的代码，一个添加进餐模板的函数：

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);
      }

在单击调用特定div的addItemCategory() ，我希望将另一个div作为该div的子级添加。 可以有多个进餐模板，对于每个模板，我可以调用addItemCategory多个时间，并且我希望将类别添加到调用该函数的同一div中。 我该如何实现？

目前，我正在使用mealCount变量来获取上下文，但是一旦增加它，就无法访问之前添加的div，无法向该div添加新元素。 任何使用jQuery或AngularJs的方式吗？

Answer 1

您可以使用ng-repeat

例如：

 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>

注意：我更改了模型等。这只是示例。

Answer 2

下面是一个示例Plunker，说明如何使用Angular中的ng-repeat解决您的问题：

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() {

  }
}]);

我不确定您希望逻辑如何工作，但是我可以确定可以修改此示例以适合您的需求。

Ng-repeat就像循环一样，将循环包装的内容打印到数组的末尾。 Ng-repeat具有很多功能，例如按索引跟踪数组中的元素，这可以用来（如示例中一样）为每个输入赋予唯一的ID。

如果您需要对餐点进行一些特定的更改，则可以将其作为参数传递，例如，如果您要删除特定餐点，则可以在ng-repeat中添加一个按钮，如下所示：

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

这意味着您不必通过例如jQuery的ID来直接访问该餐。

我会说不建议您按照现在的方式混合使用angular和jQuery。 尝试坚持使用Angular并避免使用jQuery。 在某些特殊情况下，您需要进行元素特定的修改，可以使用jQlite来实现：

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