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>
Related
I would like to populate a pair of Yes or No radio buttons using angularjs.
I've a single value to do this from in $scope which is called x.employed.
x.employed has three possible values null, 'true' and 'false'.
How do I both make the Radio Button show the value from x.employed and then collect any subsequent change from the user.
<div class="container" ng-repeat="x in FormList" >
<div class="form-group">
<input type="radio" ng-value="x.employed" ng-model="new.employed" /> Yes
<input type="radio" ng-value="x.employed" ng-model="new.employed" /> No
</div>
I've also tried ng-checked but as i understand it cant be used with ng-model. This has me completely confused can anyone throw some light on how i'd go about doing this please?
You have a couple of issues. First, value (or ng-value) needs to be set to the value associated with the button, Yes or No. Second, ng-model should be set to the property in your object.
var app = angular.module('sample', []);
app.controller('MainCtrl', function($scope) {
$scope.FormList = [{
employed: 'true'
}, {
employed: 'false'
}, {
employed: null
}];
});
<html ng-app="sample">
<head>
<meta charset="utf-8" />
<title>AngularJS Sample</title>
<script data-require="jquery#2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container" ng-repeat="x in FormList">
<div class="form-group">
<input type="radio" ng-value="'true'" ng-model="x.employed" /> Yes
<input type="radio" ng-value="'false'" ng-model="x.employed" /> No
</div>
</div>
</body>
</html>
I have angularjs front end code as follows:
function addController($scope, $http) {
$scope.tableNames = [];
$scope.addNewColumn = function(item) {
$scope.tableNames.push({})
}
}
<html ng-app>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="addController">
<div class="col-sm-10">
<fieldset ng-repeat="item in tableNames track by $index">
<span> TextBox1:<input type="text" ng-model="item.item1" />
TextBox2:<input type="text" ng-model="item.item2" /></span>
</fieldset>
<button class="btn btn-default" ng-click="addNewColumn()">Add Colname</button>
</div>
<pre>{{tableNames|json}}</pre>
</body>
</html>
So when I enter text in the textbox1 and textbox2 it shows array of below format:
[{
"item1":"textbox1value",
"item2":"textbox2value"
}]
and also when i click addColname button and generate another textbox, values are pushed in different property as follows,it generates:
[{
"item1":"textbox1value",
"item2":"textbox2value"
},
{
"item1":"textbox1value",
"item2":"textbox2value"
}
]
but what actually i need is of structure,
[{
"textbox1value":"textbox2value",
"textbox1value":"textbox2value",
.....
}]
note(:"textboxvalue" are values entered inside textboxes.
somebody help me to get desired output. thanks in advance
This is a working code. I hope this helps :)
<html ng-app>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script>
function addController($scope, $http) {
$scope.tableNames = [];
$scope.getData={};
var i=-1;
$scope.addNewColumn = function (item) {
$scope.tableNames.push({})
i++;
}
$scope.addData = function(item){
if(i >= 0){
$scope.newData=[];
$scope.getData[$scope.tableNames[i].item1]=$scope.tableNames[i].item2;
$scope.newData.push($scope.getData);
}
}
}
</script>
</head>
<body ng-controller="addController">
<div class="col-sm-10">
<fieldset ng-repeat="item in tableNames track by $index">
<span> TextBox1:<input type="text" ng-model="item.item1" ng-keyup="addData()"/>
TextBox2:<input type="text" ng-model="item.item2" ng-keyup="addData()"/></span>
</fieldset>
<button class="btn btn-default" ng-click="addNewColumn()">Add Colname</button>
</div>
<pre>{{newData|json}}</pre>
</body>
</html>
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..
This is a problem that can be easily done by declaring a scope function but I was wondering if there is a better way to make this easier
The code is:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body ng-controller="myCtrl">
<input type="checkbox" ng-model="activate" id="activate"> ACTIVATE <br />
<input type="text" ng-model="first" ng-disabled="!activate">
<input type="text" ng-model="second" ng-disabled="!activate">
<!-- <span id="clickMe">Click Me!</span> -->
<script type="text/javascript">
app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout){
});
</script>
</body>
</html>
So this is the case. The other two fields will be enabled if the checkbox is checked and true and will be disabled if the checkbox is unchecked. What I want is, to make the fields go null or blank automatically upon disabling.
Here is an example: http://plnkr.co/edit/2EPuhRiR9OncV8z7q018?p=preview
Ignoring the fact that it is not a good practice to put too much logic directly in the view, a technical solution would be:
<input type="checkbox" ng-model="activate" id="activate" ng-change="sameAsAbove(first, second); value = null"> ACTIVATE <br />
<input type="text" ng-model="value.first" ng-disabled="!activate">
<input type="text" ng-model="value.second" ng-disabled="!activate">
This jsFiddle explains it all
My code separates hashtags, e.g., #riots = <span class="hashtags">#riots</span> but it's being printed as plaintext instead of html. What am I doing wrong?
function formCtrl($scope){
$scope.$watch(function() {
$scope.description = "Wow, it's crazy over here! #baltimore #riots";
$scope.vidTags = $scope.description.match(/(^|\s)(#[a-z\d-]+)/ig);
$scope.desc = $scope.description.replace(/(^|\s)(#[a-z\d-]+)/ig, "$1<span class='hashtag'>$2</span>");
})
}
#description {
width: 300px;
height: 3em;
}
.hashtag {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="formCtrl">
<textarea ng-model="description" id="description"></textarea>
<br />
vidTags: {{vidTags}}
<br />
desc: {{desc}}
<br />
</div>
Here's a Plunker that shows a working example using $sce.
http://plnkr.co/edit/sZliFJjOTiRyFxe7Bdts?p=preview
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="angular.js#1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="formCtrl">
<textarea ng-model="description" id="description"></textarea>
<br />vidTags: {{vidTags}}
<br /><div ng-bind-html="desc"></div>
<br />
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function formCtrl($scope, $sce) {
$scope.$watch(function() {
$scope.description = "Wow, it's crazy over here! #baltimore #riots";
$scope.vidTags = $scope.description.match(/(^|\s)(#[a-z\d-]+)/ig);
var message = $scope.description.replace(/(^|\s)(#[a-z\d-]+)/ig, '$1<span class="hashtag">$2</span>');
$scope.desc = $sce.trustAsHtml(message);
})
})
</script>
</body>
</html>
You now have to use $sce to run your output through a filter, which
you can specify to allow the HTML.
We can implement this using $sce.trustAsHtml() by adding a filter to
[the] code (outside of the controller). This custom filter will make
sure that [the] HTML doesn’t get filtered out by AngularJS 1.2/AngularJS
1.3 or later
Sources:
http://creative-punch.net/2014/04/preserve-html-text-output-angularjs/
https://docs.angularjs.org/api/ng/service/$sce