Bind and refresh scope variable with a select - javascript

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

My dropdownlist select onchange is not firing in angular js

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>

Button clicked reset the dropdown selector

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>

converting multiple selection to json data and then binding it to scope

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>

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>

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