I have a drop down with values which I am using a drop box to display the items. I want to handle the click event and print the index of the element in the array. The view code is as below:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link data-require="font-awesome#4.5.0" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myController">
<select ng-options="item for item in items" ng-model="item" ng-change="handleClick($index)">
</select>
</html>
On the controller I have the function but I am not getting the index on selecting.
// Code goes here
angular.module("myApp", []).
controller("myController", function($scope){
$scope.handleClick = function(index){
console.log("came inside the handleClick function with the currext index "+index);
}
$scope.items=["pradeep","praveen", "sagar","vinod"];
})
Please let me know where I am going wrong. link to Plunkr - Link to Plnkr
$index isn't defined when using ngOptions - your best bet is to use indexOf and find the index:
<select ng-options="item for item in items" ng-model="selectedItem" ng-change="handleClick(selectedItem)">
And the JS:
$scope.handleClick = function(selectedItem) {
var index = $scope.items.indexOf(selectedItem);
}
Related
I'm facing troubles when using md-input-container directive with the k-rebind event of Kendo UI. The issue ocurrs when I tried to rebind the min value for the end date (Second datepicker).
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.mobile.all.min.css"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.8.1/angular-translate.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="appController">
<input id="datepicker" kendo-date-picker k-ng-model="date" />
<md-input-container>
<label>End Date</label>
<input id="datepicker" kendo-date-picker k-min="date" k-rebind="date" />
</md-input-container>
</div>
<script>
angular
.module('app', ['kendo.directives', 'ngMaterial'])
.controller('appController', function (){});
</script>
</body>
</html>
I think the issue ocurrs because when Kendo performs the rebinding, it clones the input node; but I am not sure of that.
Have you ever faced this issue? Or How do you get working both (md-input-container and k-rebind) together?
I trying to include chosen js library in to my project where i use select html tag. Its working with simple selection list, but when i try to populate list using angular js ng-repeat , its not working. Please help me where i gone wrong. below is my code.
<html>
<head>
<title></title>
<link rel="stylesheet" href="docsupport/style.css">
<link rel="stylesheet" href="docsupport/prism.css">
<link rel="stylesheet" href="chosen.css">
</head>
<body ng-app="testapp" ng-controller = "testController">
<select chosen class="chosen-select" ng-options = "cust.CustName for cust in customers">
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
<script src="docsupport/init.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<script type="text/javascript">
var app = angular.module('testapp', []);
app.controller('testController',['$scope','$http', function($scope,$http)
{
$http.get("php/getCustomerList.php")
.then (function(response)
{
$scope.customers = response.data;
});
}]);
</script>
</body>
</html>
I think you have to use ng-model with ng-options in your select tag.
Try like below code:
<select chosen class="chosen-select" ng-model="mySelectBox" ng-options = "cust.CustName for cust in customers">
You can check my running snippet here. I removed your api call and enter value manually
<html>
<head>
<title></title>
<link rel="stylesheet" href="docsupport/style.css">
<link rel="stylesheet" href="docsupport/prism.css">
<link rel="stylesheet" href="chosen.css">
</head>
<body ng-app="testapp" ng-controller = "testController">
<select chosen class="chosen-select" ng-model="mySelect" ng-options = "cust.CustName for cust in customers">
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
<script src="docsupport/init.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<script type="text/javascript">
var app = angular.module('testapp', []);
app.controller('testController',['$scope','$http', function($scope,$http)
{
$scope.customers = [{'CustName':'Angular'},{'CustName':'JavaScript'},{'CustName':'Java'}];
}]);
</script>
</body>
</html>
I am using angular-filter countBy function to group and count the number of entries for a column. I would like to pass the values from this into a separate bar-chart on the same page. I have tried a number of ways but haven't manage to get it to work.
HTML:
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-resource.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"></script> -->
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script src="http://ui-grid.info/release/ui-grid.css"></script>
<script src="node_modules/angular-chart.js/node_modules/chart.js/dist/Chart.min.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
<script src="node_modules/angular-filter/dist/angular-filter.min.js"></script>
<!-- <script src="/js/app.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="/css/main.css" type="text/css">
<!-- <link rel="stylesheet" href="/webjars/bootstrap/3.3.6/css/bootstrap.css"> -->
</head>
<body>
<div ng-controller="myController">
<div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
<div><canvas id="bar" class="chart chart-bar"chart-data="key" chart-labels="value" chart-series="series"></canvas></div>
<div><li ng-repeat="(key, value) in myData | countBy: 'col_ky'" >Column Key: {{ key }}, Number of Hits: {{ value }}</li></div>
</div>
</body>
</html>
Controller:
var app = angular.module('app',['ngTouch', 'ui.grid', 'chart.js', 'angular.filter']);
app.controller('myController',['$scope', '$http','$filter',function($scope, $http, $filter) {
$scope.barData = [];
$scope.labels = [];
$scope.myData = [{"col_ky":"75421","crt_ts":1501365031000},{"col_ky":"75421","crt_ts":1501124681000},{"col_ky":"75421","crt_ts":1501124688000},{"col_ky":"880610","crt_ts":1501127589000},{"col_ky":"880610","crt_ts":1501127715000},{"col_ky":"891733","crt_ts":1501128075000},{"col_ky":"75421","crt_ts":1501128130000},{"col_ky":"880610","crt_ts":1501128181000},{"col_ky":"75421","crt_ts":1501128192000},{"col_ky":"885110","crt_ts":1501128364000},{"col_ky":"880610","crt_ts":1501128369000},{"col_ky":"326083","crt_ts":1501130957000},{"col_ky":"75421","crt_ts":1501131142000},{"col_ky":"863184","crt_ts":1501131949000}];
}]);
If I could pass the keyand value from ng-repeat into the barData and labels vars in the controller maybe , I could then use barData and labels to populate the bar chart. So how can I do this?
I finally got the code jsfiddle working, its working fine. The code shows how to call the custom filter function. I hope this is what you are looking for. Also one more thing. The line that does the custom filter is as so
$scope.barData = $filter('countBy')($scope.myData, "col_ky");
Jsfiddle: https://jsfiddle.net/Kai_Draord/p3exg6rw/9/
Final Output:
This is my code, and I want to catch changing in search input field, but jQuery "keyup" is not working. And I'm using Angular to manipulate my data. I tried to add default text input to my page, and everything worked fine.enter code here
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap-select live search</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
//angular stuff
var app = angular.module('app', []);
app.service('service', function(){
this.getCities = function (){
return ["Аксаковщина д. Минская обл., Минский р-н, Горанский с/с",
"Андреевщина д. Витебская обл., Оршанский р-н, Андреевщинский с/с",
"Антоновка д. Гомельская обл., Калинковичский р-н, Горбовичский с/с",
"Антоново д. Брестская обл., Барановичский р-н, Колпеницкий с/с"];
};
});
app.controller('ctrl', function ($scope, service){
$scope.cities = service.getCities();
});
//jquery stuff
$(document).ready(function (){
$('input').on('keyup', function() {
alert('keyup is fired!!!');
});
});
</script>
</head>
<body ng-app="app" ng-controller="ctrl">
<div id="destinationFrom">
<select id="selectDestinationFrom" class="selectpicker" data-live-search-style="startsWith" data-live-search="true">
<option ng-repeat="city in cities track by $index">{{city}}</option>
</select>
</div>
<input type="text"/>
</body>
</html>
Please use these css and js.You are using older version of css and js.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title> Angular JavaScript! </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<div class="container">
<input class="form-control" ng-model="Firstname" />
{{Firstname}}
</div> <!-- container -->
</body>
</html>
my script.js
var app = angular.module('myApp'. []);
app.controller('myCtrl', function($scope){
$scope.Firstname = "guidy";
$scope.Lastname = "manson";
})
I've been trying to find a for solution for this for hours and I just can't find any.
My problem is that the data binding suddenly isn't working after I put ng-app="myApp" in my Html tag. However, when I put it this way: ng-app="", the data binding is already working. Can you guys figure out why angularjs data-binding is not working after I put or identify "myApp" in my ng-app?
var app = angular.module('myApp'. []);
This should have a comma and not a dot
var app = angular.module('myApp', []);
Also add ng-controller="myCtrl" to your view
you should add ng-controller directive to your view.
<body ng-controller="myCtrl">
<div class="container">
<input class="form-control" ng-model="Firstname" />
{{Firstname}}
</div> <!-- container -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>