AngularJS repeat HTML content based on Dropdown selection number - javascript

I have drop down to select a number.
Based on the selected value I need to repeat the sections in html.
For example if I choose 3 in the drop down then the page should display
Display section 1 of 3
Display section 2 of 3
Display section 3 of 3
Please help to figure out how I can achieve this. Your time and help is greatly appreciated.
Java Script:
angular.module("myApp", [])
.controller("SolutionCtrl", function SolutionCtrl() {
var vm = this;
vm.noOfSites = 0;
vm.updateSites = function() {
console.log(vm.noOfSites);
}
vm.getTimes = function(n) {
return new Array(n);
}
})
html:
<body>
<div ng-app="myApp">
<div ng-controller="SolutionCtrl as ctrl">
<div>
<h5>Select No of Sites:</h5>
<select ng-model="ctrl.noOfSites" ng-change="ctrl.updateSites()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div ng-repeat = "t in ctrl.getTimes(ctrl.noOfSites) track by $index">
<h2>Display section {{t}} of 3 </h2>
</div>
</div>
</div>
</body>
JSFiddle:


Working Fiddle: https://jsfiddle.net/mnaxp5nz/6/
HTML
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<div>
<h5>Select No of Sites:</h5>
<select ng-model = "noOfSites" ng-init = "noOfSites = 0" ng-change = "updateSections();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div ng-repeat = "section in sections">
Section {{ $index + 1 }} of {{ sections.length }}
</div>
</div>
</div>
</body>
Script
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sections = [];
$scope.updateSections = function () {
$scope.sections = [];
for (counter = 1; counter <= $scope.noOfSites; counter++) {
$scope.sections.push(counter);
}
}
});
</script>


just add the angularjs script file in your script it is working for me
try below one:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">
angular.module("myApp", [])
.controller("SolutionCtrl", function SolutionCtrl() {
var vm = this;
vm.noOfSites = 0;
vm.updateSites = function() {
console.log(vm.noOfSites);
}
vm.getTimes = function(n) {
return new Array(n);
}
})
</script>
<body>
<div ng-app="myApp">
<div ng-controller="SolutionCtrl as ctrl">
<div>
<h5>Select No of Sites:</h5>
<select ng-model="ctrl.noOfSites" ng-change="ctrl.updateSites()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div ng-repeat = "t in ctrl.getTimes(ctrl.noOfSites) track by $index">
<h2>Display section {{t}} of 3 </h2>
</div>
</div>
</div>
</body>


How about this...
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">
angular.module("myApp", [])
.controller("SolutionCtrl", function SolutionCtrl() {
var vm = this;
vm.arr = [];
vm.noOfSites = 0;
vm.updateSites = function() {
for (var i = 1; i <= vm.noOfSites; i++) {
vm.arr.push(i);
}
}
vm.getTimes = function(n) {
return new Array(n);
}
})
</script>
<body>
<div ng-app="myApp">
<div ng-controller="SolutionCtrl as ctrl">
<div>
<h5>Select No of Sites:</h5>
<select ng-model="ctrl.noOfSites" ng-change="ctrl.updateSites()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div ng-repeat="t in ctrl.arr track by $index">
<h2>Display section {{t}} of 3 </h2>
</div>
</div>
</div>
</body>


You have to change in GetTimes method that return array.
Please try below.
angular.module("myApp", [])
.controller("SolutionCtrl", function SolutionCtrl() {
var vm = this;
vm.noOfSites = 0;
vm.updateSites = function() {
//console.log(vm.noOfSites);
}
vm.getTimes = function(count) {
//return new Array(n);
var ratings = [];
for (var i = 0; i < count; i++) {
ratings.push(i)
}
return ratings;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div ng-app="myApp">
<div ng-controller="SolutionCtrl as ctrl">
<div>
<h5>Select No of Sites:</h5>
<select ng-model="ctrl.noOfSites" ng-change="ctrl.updateSites()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div ng-repeat = "t in ctrl.getTimes(ctrl.noOfSites) track by $index">
<h2>Display section {{t+1}} of 3 </h2>
</div>
</div>
</div>
</body>


Try this
<div ng-app="myApp">
<div ng-controller="Ctrl as vm">
<div>
<h5>Select No of Sites:</h5>
<select ng-model="vm.noOfSites" ng-options="durations for durations in vm.stories"></select>
</div>
<div ng-repeat = "t in vm.getTimes(vm.noOfSites) track by $index" ng-show="vm.noOfSites">
<h2>Display section <span data-ng-bind="$index + 1"></span> of <span data-ng-bind="vm.stories.length"></span> </h2>
</div>
</div>
script
angular.module('myApp', [])
.controller('Ctrl', function Ctrl(){
this.stories = [1,2,3]
this.getTimes = function(n) {
if(n){
return new Array(n);
}
}
});

Related

How to rearrange div boxes with js written children, following given array?

I am trying to making a list, in which it calculate the sum of select numbers.
There are actually over 300 items, so I limited to 6 here.
Generally, the "Image with name" adding, Change Language, Calculations all works.
I also tried the "arrange buttons" in small scale, for which it also works.
But when I add the "rearrange" buttons for the list, the page just keep refreshing back to its original way.
Is there a way to do the rearrange DIV trick?
(By the way, this seems to be working on Firefox, Chrome and Safari, but just never works on IE/Edge)
let imgList = [{
name: 30001,
file: 'icon/30001.gif',
jpName = 'ア',
engName = 'alpha'
},
{
name: 30002,
file: 'icon/30002.jpg',
jpName = 'イ',
engName = 'beta'
},
(name: 40001, file: 'icon/40001.gif', jpName = 'ウ',
engName = 'gamma'
},
{
name: 41002,
file: 'icon/41002.jpg',
jpName = 'エ',
engName = 'delta'
},
{
name: 50301,
file: 'icon/50301.jpg',
jpName = 'オ',
engName = 'mu'
},
{
name: 50401,
file: 'icon/50401.jpg',
jpName = 'ン',
engName = 'nu'
}
];
//Language Controler
let control = [{
name: 'jp',
title: '計算',
ans: '答え'
},
{
name: 'eng',
title: 'Calculations',
ans: 'Answer'
}
]
//Array Lists
let ArrayOne = ['test30001', 'test30002', 'test40001', 'test41002', 'test50301', 'test50401'];
let ArrayTwo = ['test50301', 'test50401', 'test40001', 'test41002', 'test30001', 'test30002'];
let ArrayThree = ['test30001', 'test40001', 'test50301', 'test50401', 'test30002', 'test41002'];
//Give images and name
function goImage(arr) {
let x = imgList.findIndex(num => num['name'] === arr);
document.getElementById('art' + arr).innerHTML = '<img src="' + imgList[x].file + '"><br>' + imgList[x][language + 'Name'];
}
//Change page language
function placeAll() {
let tb = control.findIndex(lang => lang['name'] === language);
document.getElementById('title').innerHTML = control[tb].title;
document.getElementById('totalName').innerHTML = control[tb].ans;
imgList.forEach(nameFile => {
goImage(nameFile.name)
});
}
//when select other languages
let language = 'jp';
function handleLang(myRadio) {
language = myRadio.value;
placeAll();
}
//amount calculations
function calculate() {
var calValue = 0;
countThese.each(function() {
calValue += +$(this).val();
})
localStorage.setItem($(this).attr('id'), $(this).val());
let allRate = imgList.length * 10;
document.getElementById('totalAm').innerHTML = ((calValue / allRate) * 100).toFixed(2) + '%';
}
let countThese = $('#testBox:input').click(calculate);
//rearrange div boxes
function ArrayOne() {
$('#testBox div').each(function() {
if ($.inArray($(this).attr('id'), ArrayOne) == -1) {
$('#testBox').append($('#' + $(this).attr('id')));
}
});
};
function ArrayTwo() {
$('#testBox div').each(function() {
if ($.inArray($(this).attr('id'), ArrayTwo) == -1) {
$('#testBox').append($('#' + $(this).attr('id')));
}
});
};
function ArrayThree() {
$('#testBox div').each(function() {
if ($.inArray($(this).attr('id'), ArrayThree) == -1) {
$('#testBox').append($('#' + $(this).attr('id')));
}
});
};
<div id='title'></div>
<form id="calcul">
<div class="container" id="testBox">
<div class="tryBox" id="test30001">
<div id="art30001" class="star3">
</div>
<div id="ca30001" class="calLV3">
<select id="t30001" class="sLV3">
<option value="0">0</option>
<option value="0">1</option>
<option value="0">2</option>
</select>
</div>
</div>
<div class="tryBox" id="test30002">
<div id="art30002" class="star3">
</div>
<div id="ca30002" class="calLV3">
<select id="t30002" class="sLV3">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
<div class="tryBox" id="test40001">
<div id="art40001" class="star4">
</div>
<div id="ca40001" class="calLV4">
<select id="t40001" class="sLV4">
<option value="0">0</option>
<option value="2">2</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="tryBox" id="test41002">
<div id="art41002" class="star4">
</div>
<div id="ca41002" class="calLV4">
<select id="t41002" class="sLV4">
<option value="0">0</option>
<option value="2">2</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="tryBox" id="test50301">
<div id="art50301" class="star5">
</div>
<div id="ca50301" class="calLV5">
<select id="t50301" class="sLV5">
<option value="0">0</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
</select>
</div>
</div>
<div class="tryBox" id="test50401">
<div id="art50401" class="star5">
</div>
<div id="ca50401" class="calLV5">
<select id="t50401" class="sLV5">
<option value="0">0</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
</select>
</div>
</div>
</div>
</form>
<div id='button1'>
<button onclick="ArrayOne()">WAY1</button>
<button onclick="ArrayTwo()">WAY2</button>
<button onclick="ArrayThree()">WAY3</button>
</div>
<div id='lang'>
<input type="radio" id="jp" name="lang" value="jp" onchange="handleLang(this)" checked>
<label for="jp">日本語</label>
<input type="radio" id="eng" name="lang" value="eng" onchange="handleLang(this)">
<label for="eng">English</label>
</div>
<div class="answer">
<div class="totalName" id="totalName"></div>
<div class="totalAm" id="totalAm"></div>
</div>
<script src="script.js"></script>

There are some syntax problems, like = in your object map declarations, redeclaration of ArrayOne as a function, and a ( in your object map.
You are iterating over the HTML elements in the order that they appear, and searching the array each time as a filter. If you want them to be in the order that the array indicates, you should be iterating in order over the array.
Or you have to account for the array index while you append, and insert them in the right position, which is more involved. The easiest would be to use CSS flex and order: (number)
Also, ids should be unique to the document, so searching into #testBox and then finding the id that you want should not be necessary. You should be able to use the #id selector directly. I have kept the selectors as $('#testBox div#'+id), just to match your original code, but it should really be just $('#'+id') or document.getElementById(id)
let imgList = [{
name: 30001,
file: 'icon/30001.gif',
jpName: 'ア',
engName: 'alpha'
},
{
name: 30002,
file: 'icon/30002.jpg',
jpName: 'イ',
engName: 'beta'
},
{name: 40001, file: 'icon/40001.gif', jpName: 'ウ',
engName: 'gamma'
},
{
name: 41002,
file: 'icon/41002.jpg',
jpName: 'エ',
engName: 'delta'
},
{
name: 50301,
file: 'icon/50301.jpg',
jpName: 'オ',
engName: 'mu'
},
{
name: 50401,
file: 'icon/50401.jpg',
jpName: 'ン',
engName: 'nu'
}
];
//Language Controler
let control = [{
name: 'jp',
title: '計算',
ans: '答え'
},
{
name: 'eng',
title: 'Calculations',
ans: 'Answer'
}
]
//Array Lists
let ArrayOne = ['test30001', 'test30002', 'test40001', 'test41002', 'test50301', 'test50401'];
let ArrayTwo = ['test50301', 'test50401', 'test40001', 'test41002', 'test30001', 'test30002'];
let ArrayThree = ['test30001', 'test40001', 'test50301', 'test50401', 'test30002', 'test41002'];
//Give images and name
function goImage(arr) {
let x = imgList.findIndex(num => num['name'] === arr);
document.getElementById('art' + arr).innerHTML = '<img src="' + imgList[x].file + '"><br>' + imgList[x][language + 'Name'];
}
//Change page language
function placeAll() {
let tb = control.findIndex(lang => lang['name'] === language);
document.getElementById('title').innerHTML = control[tb].title;
document.getElementById('totalName').innerHTML = control[tb].ans;
imgList.forEach(nameFile => {
goImage(nameFile.name)
});
}
//when select other languages
let language = 'jp';
function handleLang(myRadio) {
language = myRadio.value;
placeAll();
}
//amount calculations
function calculate() {
var calValue = 0;
countThese.each(function() {
calValue += +$(this).val();
})
localStorage.setItem($(this).attr('id'), $(this).val());
let allRate = imgList.length * 10;
document.getElementById('totalAm').innerHTML = ((calValue / allRate) * 100).toFixed(2) + '%';
}
let countThese = $('#testBox:input').click(calculate);
//rearrange div boxes
function ArrayOne1() {
$(ArrayOne).each(function() {
$('#testBox').append(
$('#testBox div#'+this)
);
});
/* $('#testBox div').each(function() {
if ($.inArray($(this).attr('id'), ArrayOne) == -1) {
$('#testBox').append($('#' + $(this).attr('id')));
}
});*/
};
function ArrayTwo1() {
$(ArrayTwo).each(function() {
$('#testBox').append(
$('#testBox div#'+this)
);
});
/*
$('#testBox div').each(function() {
if ($.inArray($(this).attr('id'), ArrayTwo) == -1) {
$('#testBox').append($('#' + $(this).attr('id')));
}
});*/
};
function ArrayThree1() {
$(ArrayThree).each(function() {
$('#testBox').append(
$('#testBox div#'+this)
);
});
/* $('#testBox div').each(function() {
if ($.inArray($(this).attr('id'), ArrayThree) == -1) {
$('#testBox').append($('#' + $(this).attr('id')));
}
});*/
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='title'></div>
<form id="calcul">
<div class="container" id="testBox">
<div class="tryBox" id="test30001">
<div id="art30001" class="star3">
</div>
<div id="ca30001" class="calLV3">
<select id="t30001" class="sLV3">
<option value="0">0</option>
<option value="0">1</option>
<option value="0">2</option>
</select>
</div>
</div>
<div class="tryBox" id="test30002">
<div id="art30002" class="star3">
</div>
<div id="ca30002" class="calLV3">
<select id="t30002" class="sLV3">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
<div class="tryBox" id="test40001">
<div id="art40001" class="star4">
</div>
<div id="ca40001" class="calLV4">
<select id="t40001" class="sLV4">
<option value="0">0</option>
<option value="2">2</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="tryBox" id="test41002">
<div id="art41002" class="star4">
</div>
<div id="ca41002" class="calLV4">
<select id="t41002" class="sLV4">
<option value="0">0</option>
<option value="2">2</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="tryBox" id="test50301">
<div id="art50301" class="star5">
</div>
<div id="ca50301" class="calLV5">
<select id="t50301" class="sLV5">
<option value="0">0</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
</select>
</div>
</div>
<div class="tryBox" id="test50401">
<div id="art50401" class="star5">
</div>
<div id="ca50401" class="calLV5">
<select id="t50401" class="sLV5">
<option value="0">0</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
</select>
</div>
</div>
</div>
</form>
<div id='button1'>
<button onclick="ArrayOne1()">WAY1</button>
<button onclick="ArrayTwo1()">WAY2</button>
<button onclick="ArrayThree1()">WAY3</button>
</div>
<div id='lang'>
<input type="radio" id="jp" name="lang" value="jp" onchange="handleLang(this)" checked>
<label for="jp">日本語</label>
<input type="radio" id="eng" name="lang" value="eng" onchange="handleLang(this)">
<label for="eng">English</label>
</div>
<div class="answer">
<div class="totalName" id="totalName"></div>
<div class="totalAm" id="totalAm"></div>
</div>
<script src="script.js"></script>

how to solve $injector error in angularjs?

I am new to angularjs.i try to create simple page by using some tutorial.One page is for user input html and another one javascript for if else statement.I keep receive error in console as "[$injector:unpr]". index.html
<body ng-app="ngCribs" ng-controller="cribsController">
<div class="container">
<div class="row price-form-row" ng-if="!addListing">
<span class="input-group-addon">Min Price</span>
<select name="minPrice" id="minPrice" [ng-model]="priceInfo.min" class="form-control">
<option value="100000">$100,000</option>
<option value="200000">$200,000</option>
<option value="300000">$300,000</option>
</select>
</div>
<span class="input-group-addon">Max Price</span>
<select name="maxPrice" id="maxPrice" ng-model="priceInfo.max" class="form-control">
<option value="100000">$100,000</option>
<option value="200000">$200,000</option>
<option value="300000">$300,000</option>
</select>
<div class="container">
<div class="col-sm-4"
ng-repeat="crib in cribs | cribsFilter:priceInfo | orderBy: '-id'">
<i class="glyphicon glyphicon-tag"></i> {{crib.price | currency}} <i class="glyphicon glyphicon-home"></i> {{crib.address}}
<span class="label label-primary label-sm">{{crib.type}}</span></div>
</body>
<script src="app.js"></script>
<script src="scripts/cribsFilter.js"></script>
</html>
cribsFiler.js
angular
.module('ngCribs')
.filter('cribsFilter', function() {
return function(listings, priceInfo) {
var filtered = [];
var min = priceInfo.min;
var max = priceInfo.max;
angular.forEach(listings, function(listing) {
if(listing.price >= min && listing.price <= max) {
filtered.push(listing);
}
});
return filtered;
}
});
CribsController.js
angular
.module('ngCribs')
.controller('cribsController',function($scope, cribsFactory){
$scope.priceInfo ={
min:0,
max:1000000
}
$scope.cribs;
cribsFactory.getCribs().then(function(data){
$scope.cribs = data.data;
});
(function(error){
console.log(error);
});
});
App.js
angular.module('ngCribs',['ui.bootstrap']);

Without seeing your app.js I can't be certain, but given everything else I can make the following guess: you should probably add a script tag to reference CribsController.js :-)

Trying to get DropDown value

I'm trying to get Dropdown select value for my On change Function but got undefined value.
what I did so far is that
<div class="list">
<div class="item item-input item-select">
<div class="input-label">
Status
</div>
<select id="ddlstatus" ng-model="status" ng-change="getalert()" >
<option ng-repeat=" status in Status" value="{{status.StatusCodeId}}">{{status.StatusCode}}</option>
</select>
</div>
</div>
and my Angular Code is
$scope.StatusD =function(){
$scope.Status=[ ];
$http({
crossDomain: true,
type: 'GET',
dataType: 'jsonp',
url: Baseurl+'/api/Status'
}).then(function(resp){
$scope.Status = resp.data;
console.log($scope.Status);
});
};
$scope.getalert=function()alert(document.getElementById("ddlstatus").value)}
so what I'm missing here.how can I get selected dropdown value so I can use it further

You have bound your select's value to the $scope.status, so you can get the dropdowns value with $scope.status.
$scope.getalert = function() {
alert($scope.status).
}
Example
angular.module('app', []).controller('MyCtrl', ['$scope', function($scope){
$scope.status = 'value1';
$scope.getalert = function(){
alert($scope.status);
};
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="MyCtrl">
<select id="ddlstatus" ng-model="status" ng-change="getalert()" >
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value4">Value 4</option>
</select>
</body>

The answer by Suren Srapyan has loophole that the first option in select box is displayed as undefined.
The below code is the solution for the same.
//--app.module.js--//
angular.module('app', []);
//--app.controller.js--//
angular.module('app')
.controller('StatusController', StatusController);
StatusController.$inject = ['$log'];
function StatusController($log) {
var vm = this;
vm.status = 'value1';
vm.showStatusConsole = showStatusConsole;
function showStatusConsole() {
$log.log('Current Status Is:- ' + vm.status);
}
}
<html ng-app="app">
<body ng-controller="StatusController as statusObj">
<select id="ddlstatus" ng-model="statusObj.status" ng-change="statusObj.showStatusConsole()">
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value4">Value 4</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="app.module.js"></script>
<script src="app.controller.js"></script>
</body>
</html>

Call a function in a select element for filling ngOptions source?

I have a <select> as below:
<div ng-show="myCtrl.name == 'Jack'">
<select ng-model="myCtrl.selectedValue" ng-options="value.id as value.title for value in myCtrl.valueDrpValues">
<option value=""> Select One ...</option>
</select>
</div>
And in myController.js, I have a function which should fill the myCtrl.valueDrpValues. how can I call this function from the select tag? I tested the ng-init, but it didn't work. Also, I called the function exactly from the ng-option and it didn't work, too. (as below:)
ng-options="value.id as value.title for value in definitionCtrl.fillValueDrp()"

You can use ng-init
Call your function there and your array will be populated, for example like so:
<div ng-init="fillValueDrp()">
<div ng-show="myCtrl.name == 'Jack'">
<select ng-model="myCtrl.selectedValue" ng-options="value.id as value.title for value in myCtrl.valueDrpValues">
<option value=""> Select One ...</option>
</select>
</div>
</div>

try this.
var app = angular
.module('MyApp', [
])
.controller('Main', ['$scope', function ($scope) {
var self = this;
self.items = [];
self.name = "Jack";
self.fillValueDrp = function(){
for(var i=0 ;i < 5; i++){
self.items.push({"id":i,"title":i});
}
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="main-content" ng-app="MyApp" ng-controller="Main as myCtrl">
<div ng-show="myCtrl.name == 'Jack'" ng-init= "myCtrl.fillValueDrp()">
<select ng-model="myCtrl.selectedValue "ng-options="value.id as value.title for value in myCtrl.items">
<option value=""> Select One ...</option>
</select>
</div>
</div>

NG-Click not working in Chrome but works in FireFox

I have a NG-Click to change the amount of elements on the page (that are coming from an API call). The NG-Click utilizes a drop down box that works in FireFox. But I recently discovered that it isn't working in Chrome when a co-worker started working on the service. I have no idea as to why it wouldn't work and any help is appreciated. I've attached a JSFidle with the code.
http://jsfiddle.net/pAy3B/
JavaScript:
app.controller("AppCtrl", function($http, $scope){
var app = this;
$scope.toLoad=50;
$scope.page= 0;
$scope.sortArray = [];
$scope.filterList = "";
function getData(page){
$http.get('/file/filter/' + $scope.toLoad + '/' + $scope.page + '?' + $scope.filterList ).success(function(data){
app.info = data;
console.log(data);
});
}
$scope.changeLoad = function(toLoad){
$scope.toLoad = toLoad;
getData($scope.page)
}
}
HTML:
<body ng-app="app" ng-controller="AppCtrl as app" id="body">
<div id="main-table">
<div class="widget-body no-padding">
<div id="select-more">
<select class="form-control" name="dt_basic_length" aria-controls="dt_basic" id="box-test" style="width:6%">
<option value="10" ng-click="changeLoad(10)"> 10 </option>
<option value="25" ng-click="changeLoad(25)"> 25 </option>
<option value="50" ng-click="changeLoad(50)"> 50 </option>
<option value="100" ng-click="changeLoad(100)"> 100 </option>
<option value="1000" ng-click="changeLoad(1000)"> 1000 </option>
</select>
</div>
<table>
<tbody>
<tr ng-repeat="information in app.info | filter:searchText">
<td>{{information.uuid}}</td>
<td>{{information.publisher}}</td>
<td>{{information.ts}}</td>
</tr>
</tbody>
</table>
</div>
</div>

You should use ng-change please see here
<body ng-app="app" ng-controller="AppCtrl" id="body">
<div id="main-table">
<div class="widget-body no-padding">
<div id="select-more">
<select class="form-control" name="dt_basic_length" aria-controls="dt_basic" id="box-test" style="width:6%" ng-change="update()" ng-model="selectedItem">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="1000">1000</option>
</select>
</div>
<table>
<tbody>
<tr ng-repeat="information in app.info | filter:searchText">
<td>{{information.uuid}}</td>
<td>{{information.publisher}}</td>
<td>{{information.ts}}</td>
</tr>
</tbody>
</table>
</div>
</div>
js:
var app = angular.module('app', []);
app.controller("AppCtrl", function ($http, $scope) {
var app = this;
$scope.toLoad = 50;
$scope.page = 0;
$scope.sortArray = [];
$scope.filterList = "";
$scope.selectedItem = {};
function getData(page) {
$http.get('/file/filter/' + $scope.toLoad + '/' + $scope.page + '?' + $scope.filterList).success(function (data) {
app.info = data;
console.log(data);
});
}
$scope.changeLoad = function (toLoad) {
$scope.toLoad = toLoad;
getData($scope.page);
};
$scope.update = function () {
alert($scope.selectedItem);
};
});

Categories