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);
};
});
Related
I am trying show options from array of array inside a select drop down but it is not showing up. Can someone tell me what I am doing wrong here ? https://plnkr.co/edit/HMYbTNzkqkbAGP7PLWWB?p=preview
HTML :
<div ng-controller="MainCtrl">
<table>
<tr ng-repeat="r in rows track by $index">
<td>
<select ng-model="r.name"
ng-options="option.name as option.name for option
in availableOptions">
<option value="">Select Value</option>
</select>
</td>
<td>
<select ng-model="r.value"
ng-options="opt.name for opt in option.value for option in availableOptions | filter:{name: r.name}">
<option value="">Select Value</option>
</select>
</td>
<td>
<input type="button" ng-click="addRow()" value="Add">
</td>
<td>
<input type="button" ng-click="deleteRow($index)"
value="Delete">
</td>
</tr>
</table>
<div>
{{rows}}
</div>
JS :
var bb = [];
bb.push({name:"CCCC"});
bb.push({name:"AAAA"});
bb.push({name:"DDDD"});
var aa = [];
aa.push({name:"CCCC"});
aa.push({name:"AAAA"});
aa.push({name:"BBBB"});
var cc = [];
cc.push({name:"BBBB"});
cc.push({name:"AAAA"});
cc.push({name:"DDDD"});
var dd = [];
dd.push({name:"CCCC"});
dd.push({name:"AAAA"});
dd.push({name:"CCCC"});
$scope.availableOptions = [
{ name: 'TestA',
value : aa
},
{ name: 'TestB',
value : bb
},
{ name: 'TestC',
value : cc
},
{ name: 'TestD',
value : dd
},
{ name: 'TestE',
value : []
}
];
How do I specify the ng-options for value which is an array filtered based on name: 'TestE' or something ?
The are two problem sin your code :
1# you did not assign value to all aa,bb,cc,dd they were empty
2# Filter would return you array so you need to use its 1st element like this
<select ng-model="r.value"
ng-options="option.name as option.name for option
in (availableOptions | filter:{name: r.name})[0].value">
<option value="">Select Value</option>
</select>
See this https://plnkr.co/edit/cQTISC1SPucCCRQQ8ca7?p=preview
Your array are not coming through correct json format.. for more check it https://docs.angularjs.org/api/ng/directive/ngOptions
Assign the child collection to an array and use that array for populating the child dropdown:
<select ng-model="selectedChildren"
ng-options="option.value as option.name for option
in availableOptions"
data-ng-change="childOptions = selectedChildren">
<option value="">Select Value</option>
</select>
<select ng-model="value"
ng-options="option as option.name for option
in childOptions track by $index">
<option value="">Select Value</option>
</select>
Here, when parent dropdown is selected, the value property (which is basically child dropdown collection) is assigned to a scope variable childOptions which is inturn used for binding the child dropdown
https://plnkr.co/edit/mXz8jpzTrnRoqx5r7b1W?p=preview
Please make the following changes and try,
var app = angular.module('plunker', []);
app.filter('ddOptions')
app.controller('MainCtrl', function($scope) {
$scope.rows = [{name:""}];
$scope.secondOptions = [];
$scope.addRow = function(){
$scope.rows.push({name:""});
}
var bb = [];
bb.push({name:"CCCC"});
bb.push({name:"AAAA"});
bb.push({name:"DDDD"});
var aa = [];
aa.push({name:"CCCC"});
aa.push({name:"AAAA"});
aa.push({name:"BBBB"});
var cc = [];
cc.push({name:"BBBB"});
cc.push({name:"AAAA"});
cc.push({name:"DDDD"});
var dd = [];
dd.push({name:"CCCC"});
dd.push({name:"AAAA"});
dd.push({name:"CCCC"});
$scope.availableOptions = [
{ name: 'TestA',
value : aa
},
{ name: 'TestB',
value : bb
},
{ name: 'TestC',
value : cc
},
{ name: 'TestD',
value : dd
},
{ name: 'TestE',
value : []
}
];
$scope.populateOptions = function(name){
var temp = $scope.availableOptions.filter(function(val){ return val.name === name; })
console.log(temp);
$scope.secondOptions = temp[0].value;
}
$scope.deleteRow = function(index){
$scope.rows.splice(index,1);
}
});
and HTML,
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<table>
<tr ng-repeat="r in rows track by $index">
<td>
<select ng-model="r.name" ng-change="populateOptions(r.name)"
ng-options="option.name as option.name for option
in availableOptions">
<option value="">Select Value</option>
</select>
</td>
<td>
<select ng-model="r.value"
ng-options="option.name as option.name for option
in secondOptions">
<option value="">Select Value</option>
</select>
</td>
<td>
<input type="button" ng-click="addRow()" value="Add">
</td>
<td>
<input type="button" ng-click="deleteRow($index)"
value="Delete">
</td>
</tr>
</table>
<div>
{{rows}}
</div>
</div>
</body>
</html>
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);
}
}
});
In my script below I am trying to get the id of li element on ng-change event, I am injecting $element into my controller , now I can add new id to li but
the problem is, when I try to get the id of the li , it is not giving me the
updated values. It always returns 0.
Here is scripts:
var app = angular.module('myApp', []);
app.controller("baseCtrl", ['$scope',
function($scope) {
$scope.id = 0;
$scope.drivers = [];
}
]);
app.controller("childCtrl", ['$scope', '$element',
function($scope, $element) {
$scope.driver = {
name: "",
country: ""
};
$scope.change = function() {
if ($scope.driver.name && $scope.driver.country) {
var $id = $element.data('id');
console.log($id);
if ($scope.$parent.drivers.length > 0 && $id > 0) {
var $action = "update";
} else {
var $action = "insert";
}
if ($action == "update") {
$.each($scope.$parent.drivers, function(i, v) {
$scope.driver.id = $id;
if ($id == v.id) { // update
v[i] = $scope.driver;
}
});
} else if ($action == 'insert') { // insert data
//console.log($element);
$scope.driver.id = ++$scope.$parent.id;
$scope.$parent.drivers.push($scope.driver);
$element.attr('data-id', $scope.$parent.id);
}
//console.log($scope.$parent.id);
//console.log($scope.$parent.drivers);
}
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<body ng-app="myApp">
<div id="content" ng-controller="baseCtrl">
<ul>
<li ng-controller="childCtrl" data-id="0">
<input type="text" ng-model="driver.name" name="fname" ng-change="change()">
<select name="" id="" name="country_f" ng-model="driver.country" ng-change="change($event)">
<option value="india">India</option>
<option value="pakistan">Pakistan</option>
<option value="china">China</option>
</select>
</li>
<li ng-controller="childCtrl" data-id="0">
<input type="text" ng-model="driver.name" name="fname" ng-change="change()">
<select name="" id="" name="country_f" ng-model="driver.country" ng-change="change()">
<option value="india">India</option>
<option value="pakistan">Pakistan</option>
<option value="china">China</option>
</select>
</li>
<li ng-controller="childCtrl" data-id="0">
<input type="text" ng-model="driver.name" name="fname" ng-change="change()">
<select name="" id="" name="country_f" ng-model="driver.country" ng-change="change()">
<option value="india">India</option>
<option value="pakistan">Pakistan</option>
<option value="china">China</option>
</select>
</li>
<li ng-controller="childCtrl" data-id="0">
<input type="text" ng-model="driver.name" name="fname" ng-change="change()">
<select name="" id="" name="country_f" ng-model="driver.country" ng-change="change()">
<option value="india">India</option>
<option value="pakistan">Pakistan</option>
<option value="china">China</option>
</select>
</li>
</ul>
</div>
</body>
</html>
Any Help will really appreciate. Thanks in advance.
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>
I'm doing some work with my api and found that my scope variable used in the same script doesn't update:
<div ng-app="myApp" ng-controller="customersCtrl">
<select name="equipo" ng-model="selector">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
selector: {{selector}}
url: {{url}}
<div>
<p ng-repeat="j in myData">
{{ j.nombre }}
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.selector = "1";
$scope.url = "http://127.0.0.1:8080/api/equipos/"+$scope.selector+"/jugadores";
$http.get("http://127.0.0.1:8080/api/equipos/"+$scope.selector+"/jugadores").then(function (response) {
$scope.myData = response.data;
console.log($scope.myData);});
});
</script>
when a change the option in my input the url ($scope.url) doesn't change. Any tips or things that i am missing?