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

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>

Related

Selected options in bootstrap selectpicker displays as undefined in angular JS controller

On clicking the search button, the selected item must get displayed in the console. But it displays "hey undefined".
This is my html code
<div ng-controller="filterController">
<select name="model" id="model" multiple title="Any" data-live-search="true" style="display:none;" class="selectpicker" ng-model="select">
<option value="1" ng-selected="true">Restaurant</option>
<option value="2">Vegetarian</option>
<option value="3">Bar</option>
<option value="4">Night Life</option>
<option value="5">Breakfast</option>
<option value="6">Fast Food</option>
<option value="7">Steak & Grill</option>
</select>
<button class="btn btn-default" style="margin-top: 25px;" ng-click="search()"></button>
</div>
This is my jquery code.
$(document).ready(function($) {
var select = $('select');
if (select.length > 0 ){
select.selectpicker();
}
var bootstrapSelect = $('.bootstrap-select');
var dropDownMenu = $('.dropdown-menu');
bootstrapSelect.on('shown.bs.dropdown', function () {
dropDownMenu.removeClass('animation-fade-out');
dropDownMenu.addClass('animation-fade-in');
});
bootstrapSelect.on('hide.bs.dropdown', function () {
dropDownMenu.removeClass('animation-fade-in');
dropDownMenu.addClass('animation-fade-out');
});
bootstrapSelect.on('hidden.bs.dropdown', function () {
var _this = $(this);
$(_this).addClass('open');
setTimeout(function() {
$(_this).removeClass('open');
}, 100);
});
This is my controller function.
angular.module('myApp',[]).controller('filterController', function($scope) {
$scope.search = function(){
console.log('hey',$scope.select);
}
Could someone please tell me what to do?
In this, you use multiple so you get selected value in an array so if you want to console any selected value then you have to console like $scope.select[0].

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>

How to fix dynamic dropdown list with ajax error

I want when I select a category to show me all the subcategories for that specific category, but this is the error that I am getting:
GET http://localhost:8000/shto/njesin-stratigrafike?sektori+id=III 500
(Internal Server Error)
Here is the html code for dropdown lists
<select class="form-control" name="selected_sector2" id="category">
<option value="blank">Zgjedh sektorin</option>
#foreach($sektorat['sektorat2'] as $sektori2)
<option name="sektori">
{{ $sektori2->sektori_nr }}
</option>
#endforeach
</select>
here is the Route code
Route::get('shto/njesin-stratigrafike', 'NjesiteStratigrafikeController#shtoNjesiStratigrafike');
here is the Controller code
class NjesiteStratigrafikeController extends Controller
{
public function shtoNjesiStratigrafike(){
$selected_sector = Input::get('selected_sector2');
$sector_id = Sektori::where('sektori_nr',$selected_sector)
->value('sektori_id');
    $kuadratet = Kuadrati::where('sektori_id_fk', '=' ,$sector_id)->get();
return Response::json($kuadratet);
}
}
Here is the ajax code
<script type="text/javascript">
$('#category').on('change', function(e) {
var sektori_id = e.target.value;
// Ajax
$.get('/shto/njesin-stratigrafike?sektori+id=' + sektori_id, function(data) {
// Success data
$('#subcategory').empty();
$('#subcategory').append(' Please choose one');
$.each(data, function(index, subcatObj) {
$('#subcategory').append('' + subcatObj.subcategory_name + '</option>');
});
});
});
</script>
you can see following code
in view
<div class="form-group m-r-10">
<label for="exampleInputName2">Category</label>
<select class="form-control select2 productcategory" name="productcategory">
<option value="0" disabled="true" selected="true">
Product Category
</option>
#foreach($category as $c)
<option value="{{$c->id}}">{{$c->type_name}}</option>
#endforeach
</select>
</div>
<div class="form-group m-r-10">
<label for="exampleInputName2">Name</label>
<select class="form-control productname" name="productname">
<option value="0" disabled="true" selected="true">Product Name</option>
#foreach($products as $p)
<option value="{{$p->id}}">{{$p->name}}</option>
#endforeach
</select>
</div>
in ajax
<script type="text/javascript">
$(document).ready(function(){
/*--------------------------------------------------------------------------------------------------------------
* Click Add more Product
*/
$(document).on('change','.row .card_prod .productcategory',function () {
console.log("changeproduct category");
var div=$(this).parent().parent().parent().parent();
var category_id=$(this).val();
console.log(category_id);
var op="";
$.ajax({
type:'GET',
url:'{!!URL::route('findProductName')!!}',
// dataType:'json',
data:{id:category_id},
success:function(data)
{
//tr.find('.price').val(data.price);
console.log(data);
for(var i=0;i<data.length;i++){
console.log(data[i].name);
// console.log(i);
op+='<option value="'+data[i].id+'">'+data[i].name+'</option>';
}
// div.find('.productname').css('background-color','pink');
div.find('.productname').html("");
div.find('.productname').append(op);
},
error:function(msg){
console.log(msg);
console.log("error");
}
});
});
// document DOM end
</script>
in route
Route::get('/findProductName',array('as'=>'findProductName','uses'=>'InventoryController#findProductName'));
in controller
public function findProductName(Request $request)
{
$data=Product::select('name','id')->where('type_fk_id',$request->id)->take(100)->get();;
return response()->json($data);
}

Bind and refresh scope variable with a select

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?

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