I am using angularjs bootstrap popover inside a table.
The table is populated using ng-repeat and if the popover is open and i get new data to the table there is a flicker to the popover.
Here is a working example
Pknkr
Any thought on how can i prevent the flicker ?
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<br/>
<br/>
<table>
<tr ng-repeat="item in list">
<td>
<button uib-popover-template="dynamicPopover.templateUrl"
popover-is-open="aux.openPopOverId==item.id"
ng-click="aux.openPopOverId=item.id" popover-placement="right" type="button" class="btn btn-link">
Popover
</button>
</td>
</tr>
</table>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>{{dynamicPopover.content}}</div>
<div class="form-group">
<label>Popup Title:</label>
<input type="text" ng-model="dynamicPopover.title" class="form-control">
</div>
</script>
</div>
</body>
</html>
And the js
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope,$interval, $sce) {
$scope.dynamicPopover = {
templateUrl: 'myPopoverTemplate.html',
title: 'Title'
};
$scope.list = [{'id':1},{'id':2},{'id':3}];
$scope.aux = {'openPopOverId':2};
$scope.updateList = function(){
$scope.list = [{'id':1},{'id':2},{'id':3}];
}
$interval($scope.updateList,500,0);
});
I thought this could be help you please read here in detail..
Related
Many times answered, but I still don't understand what's wrong in my code. I'm new to JavaScript and Angular, so please help why I'm getting this error.
Here's my HTML and JavaScript codes. I'm trying to make an array from user input values, show them in table and then insert a button to calculate the cheapest and the most expensive items of the list. Right now I'm stuck in getting the user inputs in the array because of the angular error.
var listaArr = [];
var app = angular.module("ostosLista", []);
app.controller("listaKontrolleri", ['$scope', function($scope) {
$scope.listaArr = [{"syotettyTuote": "syotettyHinta"}];
}]);
var syotettyTuote = $scope.document.getElementById("tuote");
var syotettyHinta = $scope.document.getElementById("hinta");
function lisaaListaanTuote(){
$scope.listaArr.push($scope.syotettyTuote.value);
}
function lisaaListaanHinta(){
$scope.listaArr.push($scope.syotettyHinta.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en-US" ng-app="ostosLista">
<head>
<title>Budjetti</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body ng-controller="listaKontrolleri">
<h1>Listasi</h1>
<table>
<tr ng-repeat="syotettyTuote and syotettyHinta in listaArr">
<td>{{ $index + 1 }}</td>
<td>{{ x.syotettyTuote }}</td>
<td>{{ x.syotettyHinta }}</td>
</tr>
</table>
<form>
<fieldset>
<legend>Listaan</legend>
<input id="tuote" type="text" ng-model="syotettyTuote" placeholder="Tuote" />
<button ng-click="lisaaListaanTuote()">Laita listaan</button>
<input id="hinta" type="parseInt" ng-model="syotettyHinta" placeholder="Hinta" />
<button ng-click="lisaaListaanHinta()">Laita listaan</button>
</fieldset>
</form>
<h2>Listasi kallein ja halvin tuote</h2>
<button id="laske" onclick="laske()" placeholder="Laske kallein ja halvin tuote">Laske kallein ja halvin</button>
<textarea id="kallein" placeholder="Kallein" ></textarea>
<textarea id="halvin" placeholder="Halvin"></textarea>
</body>
</html>
You've used $scope object outside the Controller and the code language is a bit difficult to understand.
However, I've added the simple example from your code.
var listaArr = [];
var app = angular.module("ostosLista", []);
app.controller("listaKontrolleri", ['$scope', function($scope) {
$scope.listaArr = [];
$scope.lisaaListaanTuote = function(){
var val = angular.element(document.querySelector("#tuote")).val();
console.log(val);
$scope.listaArr.push(val);
}
}]);
<!DOCTYPE html>
<html lang="en-US" ng-app="ostosLista">
<head>
<title>Budjetti</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body ng-controller="listaKontrolleri">
<h1>Listasi</h1>
<table>
<tr ng-repeat="item in listaArr">
<td>{{item}}</td>
</tr>
</table>
<form>
<fieldset>
<legend>Listaan</legend>
<input id="tuote" type="text" placeholder="Tuote" />
<button ng-click="lisaaListaanTuote()">Laita listaan</button>
</fieldset>
</form>
</body>
</html>
I'm doing an simple app-ToDoList with login page.the second page have a controller that update dynamically the content of my ToDoList, unfortunately when I launch my application the controller not update the page...there someone that could advice me what's wrong? maybe I'm missing something..
here the application with the code :
http://plnkr.co/edit/IIYlc1RbEeW8mn9L6YVL?p=preview
This is the page where load the contents.
<html ng-app="toDoApp" ng-controller="toDoController">
<head>
<title>Tasks App</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
<script src="app.js" type="text/javascript"></script>
<script src="ToDocontroller.js" type="text/javascript"></script>
</head>
<body>
<h1>My To-do List</h1>
<h2>Tasks</h2>
<table>
<tr><td>
<h3>Active ({{ tasks.length }})</h3>
<span ng-hide="tasks.length">You have no active tasks!</span>
<div ng-repeat="task in tasks">
<input type="checkbox" ng-click="transferTo($index, tasks, completed)" /> {{ task }}<br />
</div>
</td><td>
<div ng-show="completed.length">
<h3>Completed ({{ completed.length }})</h3>
<div ng-repeat="task in completed">
<input type="checkbox" ng-click="transferTo($index, completed, tasks)" checked /> <span class="complete">{{ task }}</span><br />
</div>
</div>
</td></tr>
</table>
<h2>Add a Task</h2>
<form ng-submit="addTask()">
<input type="text" placeholder="Description" ng-model="newTaskName" />
<input type="submit" value="Add" />
</form>
</body>
</html>
Here my controller
angular.module('toDoApp', [])
.controller('toDoController', ['$scope', function($scope) { alert('1');
$scope.tasks = ['Do the laundry'];
$scope.completed = [];alert('1');
$scope.newTaskName = '';
alert('2');
$scope.addTask = function() {
var name = $scope.newTaskName;
if (name && $scope.tasks.indexOf(name) == -1
&& $scope.completed.indexOf(name)) {
$scope.tasks.push(name);
$scope.newTaskName = '';
}
};
$scope.transferTo = function(index, start, end) {
end.push(start[index]);
start.splice(index, 1);
}
}]);
tnx in advance
So many mistakes. This is just sample. You should use $route (ng-view or ui-view) for route navigation.. I was updated plnkr.
http://embed.plnkr.co/C1ubxufRQHN4rfGooxeF/
I want to display a static suggestions in a search textbox but nothing is displayed. I am following this https://codepen.io/joe-watkins/pen/EagEWv.
Here is my code.
HTML code:
<div>
<input type="text" name="questions" id="questionss" class="form-control select2-search search_query" placeholder="what are you looking for ?" ng-model='myquery' typeahead="question for question in questions | filter:$viewValue | limitTo:3" />
<div class="form-group">
<button type="button" class="btn btn-primary" ng-click="search()">
Get an answer ! <i class="fa fa-search"></i>
</button>
</div>
And my controller:
var Questions=["hello","hi","question1","question2","question2"];
$scope.questions=Questions;
Check if any error in your browser console, as your code is really working.
1.Make sure you have include all the dependence:
<link rel="stylesheet prefetch" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
2.Notice ng-app="angularTypeahead" in the html and:
var myApp = angular.module("angularTypeahead", ["ui.bootstrap"]);
3.Notice ng-controller="TypeaheadCtrl" and:
myApp.controller("TypeaheadCtrl", function($scope) {...});
4.Full code:
Here is a full code live demo
<html>
<head>
<link rel="stylesheet prefetch" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
</head>
<body>
<div ng-app="angularTypeahead">
<div class="container-fluid" ng-controller="TypeaheadCtrl">
<label for="states">Search for Answer</label>
<input type="text" name="questions" id="questionss" class="form-control select2-search search_query" placeholder="what are you looking for ?" ng-model='myquery' typeahead="question for question in questions | filter:$viewValue | limitTo:3">
<div class="form-group">
<button type="button" class="btn btn-primary" ng-click="search()">
Get an answer ! <i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<script type="text/javascript">
var myApp = angular.module("angularTypeahead", ["ui.bootstrap"]);
// setup controller and pass data source
myApp.controller("TypeaheadCtrl", function($scope) {
var Questions = ["hello", "hi", "question1", "question2", "question2"];
$scope.questions = Questions;
});
</script>
</body>
</html>
im using this plunker autocomplete
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.angularjs.org/1.2.19/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body onload='init()'>
<div id='container' ng-controller='TypeaheadCtrl'>
<h3 class="ng-binding">Item Name: {{item.name}}</h3>
<h3 class="ng-binding">Item Id: ({{item.id}})</h3>
<input id='itemInput' type="text" ng-model="item" placeholder="Item Name" typeahead="item as item.name for item in items | filter:$viewValue" class="form-control">
</div>
</body>
</html>
in my project , i face problem when i try to edit i fill the input automaticly so the problem is i just get text and all the object in ng-model
for example in the link above if i copy the world Chicken and paste it in input it will not give me the object it will be just text ,
if i insert the world c and choice the option Chicken i will get in ng-model the object (that contain id and name)
Look at working example,
http://plnkr.co/edit/Z930HmH83KIENuEjWhx3?p=preview
I have change your code a bit and made it angular code rather than java script code.
I hope it will work. I have taken your json in .json file and using $http service made call to that json.
var app = angular.module('myApp', ['ui.bootstrap']);
app.factory('autoComplete',function($http){
return{
load:function(){
$http.get('data.json').success(function (data){
sessionStorage.setItem( 'items', JSON.stringify(data) );
})
}
}
})
app.controller('TypeaheadCtrl',function($scope,$http,autoComplete){
$scope.selected = undefined;
$scope.items = JSON.parse(sessionStorage.getItem('items'));
});
I hope that little modification to this solution would take you to your required solution.
HERE is the working plunker PRESS STOP THEN RUN, BUG IN PLUNKER : http://plnkr.co/edit/QGqDjhzcFVNSHxA2hmHM?p=preview
It should be ng-bind not ng-binding and it shouldn't be class = ng-binding (angular directives are not css classes) it should be Item name: <h3 ng-bind="item.name"></h3>. Here's an example from the angularJS website:
<script>
angular.module('bindExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.name = 'Whirled';
}]);
</script>
<div ng-controller="ExampleController">
<label>Enter name: <input type="text" ng-model="name"></label><br>
Hello <span ng-bind="name"></span>!
</div>
and here's your code edited:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.angularjs.org/1.2.19/angular.min.js"> </script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body onload='init()'>
<div id='container' ng-controller='TypeaheadCtrl'>
Item name: <h3 ng-bind="item.name"></h3>
Item ID: <h3 ng-bind="item.id"></h3>
<input id='itemInput' type="text" ng-model="item" placeholder="Item Name" typeahead="item as item.name for item in items | filter:$viewValue" class="form-control">
</div>
I've seen a similar question asked around here and the answer seems to be that the variable managing whether or not the datepicker is opened should be on the parent scope. I thought I had done that here, but it's still not working. The difference between my code and all the others I've seen is that I'm using controller as and everyone else is using $scope. How should this be working with controller as?
Full Plnkr Here
Here is the main page
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />'); </script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js" data-semver="1.4.6"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as main">
<button class="btn btn-primary" ng-click="main.openModal()">Open Modal</button>
</body>
</html>
Here is the modal
<div class="modal-header">
{{modal.title}}
</div>
<div class="modal-body">
<p class="input-group">
<input type="date"
class="form-control"
ng-model="modal.dt"
is-open="main.opened"
close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="main.opened = true">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
Here are the controllers
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($modal) {
var main = this;
main.openModal = function() {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: 'ModalInstanceCtrl as modal',
size: 'sm'
});
};
});
app.controller('ModalInstanceCtrl', function($modalInstance) {
var modal = this;
modal.title = 'Modal Title';
});
You've forgotten the datepicker-popup attribute on the input element:
<input type="date" datepicker-popup
class="form-control"
ng-model="main.dt"
is-open="main.opened"
close-text="Close" />
Also, you need to add the following code into your ng-click in order to stop the click event from propagating to the button's parent elements (clicking the parent div would immediately close the datepicker popup):
$event.preventDefault(); $event.stopPropagation();
e.g.
ng-click="$event.preventDefault(); $event.stopPropagation(); main.opened = true"
or put it into a method if you prefer.
Updated Plunker