在父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