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>
Related
contact.js --- this is angular file. i am trying to make my contact app .
'use strict';
angular.module('myContacts.contacts', ['ngRoute','firebase'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/contacts', {
templateUrl: 'contacts/contacts.html',
controller: 'ContactsCtrl'
});
}])
.controller('ContactsCtrl', ['$scope', '$firebaseArray', function($scope, $firebaseArray) {
var rel = new Firebase('https://mycontact-app007.firebaseio.com/contacts');
$scope.contacts = $firebaseArray(rel);
console.log($scope.contacts);
}]);
Index.html - this the index file
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mycontacts App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="bower_components/foundation/css/foundation.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="large-12 columns">
<h1>myContact</h1>
<hr>
</div>
</div>
<div ng-view></div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="bower_components/foundation/js/foundation.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/angularfire/dist/angularfire.js"></script>
<script src="app.js"></script>
<script src="contacts/contacts.js"></script>
</body>
</html>
showing ReferenceError- Firebase is not defined
at new (contacts.js:13)
i am trying to make CURD operation app
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'm having some problems when I tried to open a calendar using jquery ui thru NgRoute Angularjs. I've tried removing ng-view tag and it works fine. i need it working with NgRoute.
index.html
<!DOCTYPE html>
<html ng-app="mainApp">
<head lang="en">
<title>AngularJS Routing</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<li> Date Picker </li>
<div ng-app="mainApp">
<ng-view></ng-view>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.jsp
(function() {
"use strict";
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(function($routeProvider) {
$routeProvider
.when('/datePicker', {
templateUrl: 'DatePicker.html',
controller: 'DemoCtrl'
})
.otherwise({
redirectTo: '/index'
});
});
mainApp.controller('DemoCtrl', ['$scope', '$http', function ($scope, $http) {
//$('#datepicker1').datepicker();
}]);
})();
DatePicker.html
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="main.js"></script>
<script>
$(function() {
$( "#datepicker1" ).datepicker();
});
</script>
</head>
<body>
<form>
<p>Fecha: <input id="datepicker1" type="text" ></p>
Main menu
</form>
</body>
</html>
http://plnkr.co/edit/Wk4zZo0WfoypMmaMgv4j
I will appreciate any help on this issue.
Thank you so much,
Ariel.
in DatePicker.html you dont need all tags again only the ones that will go inside ng-view:
<script>
$(function() {
$( "#datepicker1" ).datepicker();
});
</script>
<form>
<p>Fecha: <input id="datepicker1" type="text" ></p>
Main menu
</form>
And this will go inside index.html:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="main.js"></script>
I dont know if it will sove your problem, but it is the correct thing to do...
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);
}
I cannot figure out why the template intellij creates for me produces all these error. Even better the angular is not working. I cut and pasted some simple angular code from online sources to test it and put the Angular script inside index.html with no luck.
Here is my current code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="controllers/clickablecontroller.js"></script>
</head>
<body ng-app="myApp">
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-controller="clickable">
<input type="button" value="Click Me" ng-click="clickMe()">
{{clickable.click}}
</div>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
Controller: (clickablecontroller.js)
angular.module('myApp',[])
.controller('clickable',['$scope', function($scope){
$scope.clickMe = function(){
$scope.click = click++;
}
}]);
Errors: