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?
Related
I am very much new to AngularJS and I want to get values of OnChange of dropdownlist.
Below is my code which I tried
<div>
<select ng-controller="UserSelection as User" ng-model="User.UserSelected" ng-change="onSelectChange()">
<option value="SAP_Executive">SAP Executive</option>
<option value="Fiber_Engineer">Fiber Engineer</option>
<option value="Fiber_Lead">Fiber Lead</option>
<option value="CMM">CMM</option>
</select>
</div>
Angular code
angular.module('App', [])
.controller('UserSelection', function () {
var User = this;
User.onSelectChange = function () {
alert('change value selected');
};
});
My alert is not firing. Please suggest what I am missing here
Look here the following snippet. You have created an alias of your controller but not using it.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="App">
<select ng-controller="UserSelection as User" ng-model="User.UserSelected" ng-change="User.onSelectChange()" ng-init="User.UserSelected='--select--'">
<option value="--select--">--select--</option>
<option value="SAP_Executive">SAP Executive</option>
<option value="Fiber_Engineer">Fiber Engineer</option>
<option value="Fiber_Lead">Fiber Lead</option>
<option value="CMM">CMM</option>
</select>
</div>
<script>
angular.module('App', [])
.controller('UserSelection', function () {
var User = this;
User.onSelectChange = function () {
alert('change value selected');
};
});
</script>
</body>
</html>
I have a selector like this:
<select ng-model="type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
and a button:
<div class="btn action-btn" onclick="$ctrl.doSomething()">
Reset
</div>
I'm thinking how can it be made that when the button is clicked the selector to be reset to value 1 no matter which one is selected.
I guess that there must be a function to be called which must be implemented in the controller, but the selector is not connected to the controller so I don't know how that function can change the value of the selector.
Any suggestions?
Try using ng-click and set the model value inside the click event
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.doSomething = function() {
$scope.type = '1';
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="btn action-btn" ng-click="doSomething()">
Reset
</div>
</div>
How to convert multiple selection to json and bind it to scope? please help me with this.
this is my script :
<script type="text/javascript">
var app = angular.module('formSubmit', []);
app.controller('FormSubmitController',[ '$scope', '$http', function($scope, $http) {
$scope.list = [];
$scope.headerText = 'AngularJS Post Form Spring MVC example: Submit below form';
$scope.submit = function() {
var formData = {
"amenities" : $scope.amenities,
};
var response = $http.post('/property', formData);
response.success(function(data, status, headers, config) {
$scope.list.push(data);
});
response.error(function(data, status, headers, config) {
alert( "Exception details: " + JSON.stringify({data: data}));
});
//Empty list data after process
$scope.list = [];
$scope.$setPristine();
};
}]);
</script>
this is multiple selection I'm using :
<div class="col-md-6">
Amenities <a href="#" data-toggle="tooltip"
data-placement="bottom"
title="Press Ctrl key to select multiple Amenities"><img
src="<c:url value="/resources/images/info-icon.png"/>" /></a>
<!-- <select name="amenities" class="form-control" id="property_status" onchange="setDyna()" required> -->
<select name="amenities" class="form-control" id="amenities"
onchange="setDyna()" data-ng-model="amenities" multiple>
<option value="pool">Swimming Pool</option>
<option value="park">Playground/park</option>
<option value="gym">Gym/Fitness Center</option>
<option value="security">Gate Security</option>
<option value="club">Club House</option>
<option value="intercom">Intercom</option>
<option value="parking">Visitor Parking</option>
<option value="lift">Lift</option>
</select>
</div>
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>
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);
};
});