Question

当我将<div>“GrainContenu”添加到<div>分区时，<div>分区的所有未来添加都会保留<div>“GrainContenu”的倍数。< / p>

angular.module("Webapp",[])
    .controller("WebCtrl",function($scope){
	
	//new division
	$scope.divisions = [{id: 'division1'}];
	
	$scope.addNewDivision = function() {
	  var newItemNo = $scope.divisions.length+1;
	  $scope.divisions.push({'id':'division'+newItemNo});
	  console.log($scope.divisions[0]);
	};

	//new grainContenu
	$scope.grainContenus = [{id: 'grainContenu1'}];
	
	$scope.addNewGrainContenu = function() {
	  var newItemNo = $scope.grainContenus.length+1;
	  $scope.grainContenus.push({'id':'grainContenu'+newItemNo});
	};

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
  
<body ng-app="Webapp" ng-controller="WebCtrl">

	
	<h1>Module Opale</h1>
	Titre<input type="text" placeholder="Titre"><br />
  	Metadonnées<input type="text" placeholder="Titre"><br />
  	Objectif du module <input type="text" placeholder="Objectif">

	<div class="form-group"  data-ng-repeat="division in divisions">
	  	<h2><a ng-click="addNewDivision()">*</a>Division</h2>
	  	Titre<input type="text" placeholder="Titre"><br />
	  	Titre court<input type="text" placeholder="Titre"><br />

	    	<div class="form-group" data-ng-repeat="grainContenu in grainContenus">
		    	<h3><a ng-click="addNewGrainContenu()">*</a>Grain de Contenu</h3>
				Titre<input type="text" placeholder="Titre"><br />
			  	Titre court<input type="text" placeholder="Titre"><br />

			  	<h4>Information</h4>
			  	Titre<input type="text" placeholder="Titre"><br />
			  	<textarea rows="4" cols="50"></textarea><br />
			</div>
	</div>	
</body>
</html>

Answer 1

只有我能从你的代码中理解的是，一旦用户点击任何标题（* Division和Grain de Contenu），只应添加属于该标题的div，我修改了你的代码以便它可以工作你想要的方式。

＆＃13;

angular.module("Webapp",[])
    .controller("WebCtrl",function($scope){
	
	//new division
	$scope.divisions = [{id: 'division1'}];
	
	$scope.addNewDivision = function() {
	  var newItemNo = $scope.divisions.length+1;
	  $scope.divisions.push({'id':'division'+newItemNo});
	  console.log($scope.divisions[0]);
	};


	

	//new grainContenu
	$scope.grainContenus = [{id: 'grainContenu1'}];
	
	$scope.addNewGrainContenu = function() {
	  var newItemNo = $scope.grainContenus.length+1;
	  $scope.grainContenus.push({'id':'grainContenu'+newItemNo});
	};


});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
  
<body ng-app="Webapp" ng-controller="WebCtrl">

	
	<h1>Module Opale</h1>
	Titre<input type="text" placeholder="Titre"><br />
  	Metadonnées<input type="text" placeholder="Titre"><br />
  	Objectif du module <input type="text" placeholder="Objectif">

	<div class="form-group"  data-ng-repeat="division in divisions">
	  	<h2><a ng-click="addNewDivision()">*</a>Division</h2>
	  	Titre<input type="text" placeholder="Titre"><br />
	  	Titre court<input type="text" placeholder="Titre"><br />
       </div>	
	    	<div class="form-group" data-ng-repeat="grainContenu in grainContenus">
		    	<h3><a ng-click="addNewGrainContenu()">*</a>Grain de Contenu</h3>
				Titre<input type="text" placeholder="Titre"><br />
			  	Titre court<input type="text" placeholder="Titre"><br />
        </div>
			  	<h4>Information</h4>
			  	Titre<input type="text" placeholder="Titre"><br />
			  	<textarea rows="4" cols="50"></textarea><br />
			
	
</body>
</html>

＆＃13;

Answer 2

执行此操作的一种方法是使用嵌套控制器。

＆＃13;

angular.module("Webapp", [])
  .controller("WebCtrl", function($scope) {
    $scope.divisions = [{id: 'division1'}];
    $scope.addNewDivision = function() {
      $scope.divisions.push({id: 'division' + ($scope.divisions.length+1)});
      console.log($scope.divisions);
    };
  })
  .controller('divisionController', function($scope) {
    $scope.grainContenus = [{'id': 'grainContenu1'}];
    $scope.addNewGrainContenu = function() {
      $scope.grainContenus.push({'id': 'grainContenu' + ($scope.grainContenus.length+1)});
      console.log($scope.grainContenus);
    };
  });

＆＃13;

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body ng-app="Webapp" ng-controller="WebCtrl">
  <h1>Module Opale</h1>
  Titre
  <input type="text" placeholder="Titre">
  <br />Metadonnées
  <input type="text" placeholder="Titre">
  <br />Objectif du module
  <input type="text" placeholder="Objectif">

  <div class="form-group" data-ng-repeat="division in divisions" ng-controller='divisionController'>
    <h2><a ng-click="addNewDivision()">*</a>Division</h2>
    Titre
    <input type="text" placeholder="Titre">
    <br />Titre court
    <input type="text" placeholder="Titre">
    <br />

    <div class="form-group" data-ng-repeat="grainContenu in grainContenus">
      <h3><a ng-click="addNewGrainContenu()">*</a>Grain de Contenu</h3>
      Titre
      <input type="text" placeholder="Titre">
      <br />Titre court
      <input type="text" placeholder="Titre">
      <br />

      <h4>Information</h4>
      Titre
      <input type="text" placeholder="Titre">
      <br />
      <textarea rows="4" cols="50"></textarea>
      <br />
    </div>
  </div>
</body>

</html>

＆＃13;

如何将子元素添加到父元素，但仅限于它已经存在？

2 个答案: