は、食事のテンプレートを追加する機能、コードの私の作品です。ここ親のdiv

に対するクリック上の単一のdiv内の同じ内容で複数のdivを追加する必要があります。は、食事のテンプレートを追加する機能、コードの私の作品です。ここ親のdiv

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

ためaddItemCategory()を呼び出すクリックすると具体的にはdiv、divの子として別のdivを追加したいと思います。複数の食事テンプレートがある可能性があります。それぞれのテンプレートに対して、addItemCategoryを複数回呼び出すことができます。また、そのカテゴリの機能が呼び出された同じdivにカテゴリを追加します。これをどのように達成するのですか？

現在、私は文脈を持つためにスコープの変数からmealCountを使用していますが、それが増えれば、以前に追加されたdivにアクセスしてdivに新しい要素を追加する方法がありません。どのようにjQueryやAngularJsを使用して？

出典

2016-06-14 Ashish Pandey

はなぜビューで 'NG-repeat'を使用していない：あなたはそれjQliteを使用することによって達成することができる要素の特定の変更を行う必要があるいくつかの特殊なケースでは？ –

これはどのように役立ちますか？あなたはng-repeatの中にdiv全体を入れなければならないのですか？ –

はい、そうです。あなたはこれを行う方法を知っていますか？ –

あなたは、例えば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>

注：私は、などのモデルを変更し、それは単なる例です。..ここ

出典

2016-06-14 12:43:42

あなたの答えをありがとうMosh。しかし、私の本当の問題は、食事を追加することではなく、各食事の中に複数のカテゴリを追加することです。 addItemCategory（）が呼び出された食事のdivのコンテキストを取得する方法が必要です。それ、どうやったら出来るの？ –

食事の 'ng-repeat'のカテゴリに' ng-repeat'を追加することができます。それは同じように動作します。私はこの機能で私の答えを更新しました。 –

ありがとうMosh。これは私の問題を大いに解決しました。 –

は一例ですAnunkのng-repeatであなたの問題を解決する方法についてのPlunker gular：

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リピート内のボタンを持つことができ、たとえば、引数として渡すことができます

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

これは、例えば、jQueryを使用してidを指定して食事にアクセスする必要がないことを意味します。

あなたは今やっているように角度とjQueryを混ぜることはお勧めできません。 Angularを守り、jQueryを避けるようにしてください。

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

出典

2016-06-14 12:59:03

私の本当の問題は、毎回addItemCategory（）関数を呼び出すと、各食事の中に複数の同様のhtml要素を追加することです。それを行う正しい方法は何ですか？ –

は、食事のテンプレートを追加する機能、コードの私の作品です。ここ親のdiv

答えて

関連する問題