Angularjs push array to scope

Question

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 = [];

});

its not very clear from your question what you are looking for, Can you please eloborate more and corelate your code with your question. I think , your code and question are not in sync and its confusing. — Sreekanth
– Sreekanth, Commented Nov 24, 2016 at 4:42

Manish Singh · Accepted Answer · 2016-11-24 04:47:02Z

0

Just replace the line

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

with

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

I hope, it helps :)

answered Nov 24, 2016 at 4:47

Manish Singh

5383 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mthecreator Over a year ago

why is it available in site.tags? I ve defined a $scope.tags = [] at the top of my file. how can i just set the text value of the array?

Manish Singh Over a year ago

See, the problem is $scope.tags means this ngmodel common for everyone. If you add any element in $scope.tags, it will be applicable for all. Instead of putting it in common, you should put all the tags in their own variable i.e. 'site'

Collectives™ on Stack Overflow

Angularjs push array to scope

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related