CODEWITHSUNDEEP
javascriptjqueryangularjs
krish
krish

Reputation: 1117

ng-repeat values in single input with comma separated

I have list array.Inside that I have one nested array called types.
I am trying to show types.work inside an input field with comma separated.

This is what I have tried:

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
 $scope.init = function(){
 $scope.list=[
   {
     "name":"john",
     "types":[
       {"work":"aa"},
       {"work":"bb"}
     ]
   }
 ];
      }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="MainCtrl" ng-init="init()">
   <input type="text" ng-model="list.name">
   <label ng-repeat="data in list.types">{{data.work}}{{$last ? '' : ', '}}</label>
  </div>
</div>

Can anyone tell me that how to use ng-repeat values in single input?.

Upvotes: 1

Views: 1083

Answers (4)

bipin patel
bipin patel

Reputation: 2111

You added the list an array so you can use ng-repeat in ng-repeat or you can directly use array first object like this

<input type="text" ng-model="list[0].name">
<label ng-repeat="data in list[0].types">{{data.work}}{{$last ? '' : ', '}}</label>

Upvotes: 0

Rohan Kawade
Rohan Kawade

Reputation: 473

In case You want some other solution. You can iterate over your array in JS file and assign the value to your input model. 

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<body>
<div ng-app="app">
  <div ng-controller="MainCtrl" ng-init="init()">
  <input type="text" ng-model="listData">
  </div>
</div>
</body>
<script>var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
 $scope.init = function(){
 $scope.list=[
   {
     "name":"john",
     "types":[
       {"work":"aa"},
       {"work":"bb"}
     ]
   }
 ];
 $scope.listData = "";
 for(var i=0;i<$scope.list[0].types.length;i++){
 
	if($scope.listData!= undefined){
	$scope.listData = $scope.listData+","+$scope.list[0].types[i].work;
	}
	
	
 }
      }
});
</script>
</html>

Upvotes: 0

user8893882
user8893882

Reputation: 

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
 $scope.init = function(){
 $scope.list=[
   {
     "name":"john",
     "types":[
       {"work":"aa"},
       {"work":"bb"}
     ]
   }
 ];
 
  $scope.input_model_value  = ''
  var  temp = []
  $scope.list.forEach(function(t1){
      t1.types.forEach(function(val){
      temp.push(val.work)
    })
  })
   $scope.input_model_value = temp.join(',')
 }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="MainCtrl" ng-init="init()">
   <input type="text" ng-model="input_model_value">
   <label ng-repeat="data in list.types">{{data.work}}</label>
  </div>
</div>

Upvotes: 2

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41387

use multiple ng-repeat to access the nested array.

 <label ng-repeat="data in list">
      <label  ng-repeat="d in data.types">

        {{d.work}}
      </label>

</label>


var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
 $scope.init = function(){
 $scope.list=[
   {
     "name":"john",
     "types":[
       {"work":"aa"},
       {"work":"bb"}
     ]
   }
 ];  
 $scope.name = $scope.list[0].types.map((o) => o.work)
  $scope.name =  $scope.name.join(",")
 }
 

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="MainCtrl" ng-init="init()">
   <input type="text" ng-model="name">
   <label ng-repeat="data in list">
      <label  ng-repeat="d in data.types">
      
        {{d.work}}
      </label>
   
   </label>
  </div>
</div>

Upvotes: 1

Related Questions