Object Array in AngularJS

Question

I am newbie to AngularJS. I want array of objects name, selected and count like this at run-time :

 $scope.filenames = [
            { name: 'abc',    selected: false , count: 10},
            { name: 'ede',   selected: false, count: 5},
            { name: 'xyz',     selected: false, count: 2 },
            { name: 'pqe', selected: false, count: 8 }
          ];

So I have created restangular service that fetch the values of name, count and selected on runtime. The code to get runtime those values are :

//initialize the arrays
$scope.filenames=[];
$scope.filenames.count=[];
$scope.filenames.name=[];
$scope.filenames.selected=[];
//called rest service that fetch the names of all files
Restangular.one("getAllFiles").get().then(function(listAllFiles){
 for(i=0;i<listAllFiles.length;i++){
    var fileName=listAllFiles[i];
    //then called another rest service that return the file name along with the count like abc=2    
    var parameter="getFileCount/fileName;
    Restangular.one(parameter).get().then(function(countAndFileName){
    var spilitFileCount=countAndFileName.split("myspiliter");
    $scope.filenames.name.push(spilitFileCount[0]);
    $scope.filenames.selected.push(false);
    $scope.filenames.count.push(spilitFileCount[1]);
});
}
});

I am able to get count and file names successfully. I want all them to put in $scope.filenames array. So that I can use this array on my html page :

Html Code to display file name along with count is :

<div class="form-group" id="filename" style="display:none;">
  <label class="col-sm-8 control-label" ng-repeat="filename in filenames">
    <input
      type="checkbox"
      name="myName[]"
      value="{{filenames.name}}"
      ng-model="filenames.selected"
      ng-click="toggleSelection(filename.name)"
       > {{filename.name}} ({{filename.count}})
  </label>
</div>

But I am unable to put the values into array $scope.filenames and use it at HTML view. If I am accessing the values of $scope.filenames outside of the outer rest service, then it has nothing at all. Where I am missing the things ?

Answer 1

Your code doesn't match at all with what you want. What you want is:

$scope.filenames = [
    { name: 'abc', selected: false, count: 10},
    { name: 'ede', selected: false, count: 5},
    { name: 'xyz', selected: false, count: 2},
    { name: 'pqe', selected: false, count: 8}
];

This is a single array, containing objects.

But your code does the following:

$scope.filenames = [];
$scope.filenames.count=[];
$scope.filenames.name=[];
$scope.filenames.selected=[];

This creates 4 arrays.

What you want is

$scope.filenames = [];

And you want to push objects with 3 properties in this array:

var spilitFileCount = countAndFileName.split("myspiliter");
var object = {
    name: spilitFileCount[0],
    selected: false,
    count: spilitFileCount[1]
};
$scope.filenames.push(object);

Your ng-repeat body is wrong as well:

<label class="col-sm-8 control-label" ng-repeat="filename in filenames">

The above means: iterate over the array filenames; at each iteration, the current element is accessible using the variable filename.

So it should not be

value="{{filenames.name}}"
ng-model="filenames.selected"

but

value="{{filename.name}}"
ng-model="filename.selected"