angularjsangularjs-scopeangularjs-ng-repeat

Angularjs push array to scope


I have problems trying to push an array to scope and empty the array after that.

I fire up the function ng-click="addInput() to add a new form to the Array $scope.info.sites = []; which contains an another array meta_keys:$scope.tags.

If I click the ng-click="addInput() again the form will be generated but is filled in with data already. Means the same values on every meta_keys:$scope.tags. I think I need to empty the array before generate new. Or I am on the wrong way. thanks for help.

codepen.io

html

<div ng-app="myApp" ng-controller="myCtrl">
  {{name}}
  
<form>
 <div class="form-group"> 
  <label for="txtDevice" class="control-label">Domain Name:</label>
  <input type="text" class="form-control" ng-model="info.name" id="txtDevice">
 </div>
 <div class="form-group">
   <label for="txtIP" class="control-label">IP Address:</label>
   <input type="text" class="form-control" ng-model="info.ip" id="txtIP">
 </div>
 <div class="form-group">
    <label for="txtUsername" class="control-label">Logo:</label>
    <input type="text" class="form-control" ng-model="info.logo" id="txtLogo">
  </div>

<div class="form-group" ng-repeat="site in info.sites track by $index">
  <h4>Seite {{$index+1}}</h4>
<label type="txt" class="control-label">Title</label>
<input type="txt" class="form-control" ng-model="site.site_title" /><br />
<label type="txt" class="control-label">Desc</label>
<input type="text" class="form-control" ng-model="site.meta_desc"><br />
<label type="txt" class="control-label">Meta Keys</label>
<!-- <input type="text" class="form-control" ng-model="site.meta_keys"> -->
<tags-input ng-model="tags" ></tags-input>
</div>
  
</form>
  <button ng-click="addInput()">+add more inputs</button>
{{info | json}}
  <hr>
  
  
  tags = {{tags | json}}
  
</div>

script.js

angular.module('myApp', ['ngTagsInput'])
    .controller('myCtrl', function($scope, $http){
      $scope.name ="myName"  ;
      $scope.info = {};
      $scope.info.sites = [];
      $scope.tags = []; 
      
      
      $scope.addInput = function() { 
        //$scope.tags = []; 
         $scope.info.sites.push({
                          site_title:'',
                          meta_desc:'',
                          meta_keys:$scope.tags})
        
 }
      // $scope.info.sites.meta_keys = [];

});

Solution

  • Just replace the line

    <tags-input ng-model="tags" ></tags-input>
    

    with

    <tags-input ng-model="site.tags" ></tags-input>
    

    I hope, it helps :)