I am implementing a typeahead with an image in the dropdown the problem is when i click the item in the dropdown it does not get selected.
<body ng-app="TypeaheadDemo">
<script type="text/ng-template" id="customTemplate.html">
<a>
<img ng-src="{{match.model.img}}" width="16"> {{match.model.name}}
</a>
</script>
<div class="container-fluid" ng-controller="TypeaheadCtrl">
<h1>Angular UI Bootstrap Typeahead</h1>
<input type="text" ng-model="query" class="form-control" typeahead="name as result.name for result in results | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" />
</div>
</body>
angular.module("TypeaheadDemo", ['ui.bootstrap'])
.controller('TypeaheadCtrl', ['$scope', function($scope) {
$scope.results = [{
name: "California",
img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png"
}, {
name: "Delaware",
img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png"
}, {
name: "Florida",
img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png"
}];
}]);
Here is the link to jsfiddle http://jsfiddle.net/pqe3pf89/
Your expression is being built incorrectly, you can use select as if you like but not that way. The way you are doing so, is selecting nothing to your model.
To get your code working you can change your expression to look like the code bellow: it will select result.name as the value of your ngModel and will filter your list by the property name of your result item value using the $viewValue.
typeahead="result.name for result in results | filter:{name: $viewValue}"
#Lenilson de Castro is correct, but that will only bind $scope.query to the selected result's name property... that is "California", "Florida", ...
If you would like to bind $scope.query to the complete result object, you can use:
typeahead="result as result.name for result in results | filter:{name: $viewValue}"
Related
I want to sort a list of comments by different properties such as rating, date,...
but not using buttons and get property as text in input.
by default the property is rating, but ng-repeat does not publish any thing.
my code is:
<div ng-controller="controller as Ctrl">
<p>SortBy: <input type="text" name="input" ng-model="Ctrl.dish.sortProperty"></p>
<blockquote ng-repeat="comment in Ctrl.dish.comments | orderBy:'{{Ctrl.dish.sortProperty}}'">
<p>{{comment.rating}}</p>
<p>{{comment.comment}}</p>
<footer>{{comment.author}} ,<cite title="Source Title">{{comment.date| date:'mediumDate'}}</cite></footer>
</blockquote>
</div>
and the controller as:
<script>
var app = angular.module('myApp',[]);
app.controller('controller', function() {
var dish={
sortProperty:'rating',
comments: [
{
rating:5,
comment:"blablalbla",
author:"John Lemon",
date:"2012-10-16T17:57:28.556094Z"
},
{
rating:4,
comment:"blablabla",
author:"Paul McVites",
date:"2014-09-05T17:57:28.556094Z"
},
{
// more comments
}
]};
this.dish = dish; });
</script>
Remove the single quotes and the interpolation {{ }}:
<blockquote ng-repeat="comment in Ctrl.dish.comments | orderBy: Ctrl.dish.sortProperty">
I'm trying to get rid of the $$hashKey value that angular adds to your model value. According to most sources implementing a track by should solve this issue but I'm doing something wrong.
The vm.productTypes is any array of objects with id properties that are GUIDs.
Resulting model value...
$$hashKey: "object:445"
id: "9e695340-d10a-40ca-9cff-e9a93388912a"
name: "Medical"
type: 1
typeString: "ProductTypes"
HTML Code :
<md-select id="type" ng-model="vm.currentProduct.productType" name="type"
ng-model-options="{trackBy: '$value.id'}"
required>
<md-option ng-repeat="pt in vm.productTypes track by pt.id" ng-value="pt">
{{pt.name}}
</md-option>
</md-select>
Where am I going wrong?
Update:
Seems that the name attribute is causing this strange behavior. Bug?
http://codepen.io/anon/pen/LNpMYJ
Use ng-model-options="{ trackBy: '$value.id' }".
If you are getting list data through $http call, First prepare model object and then load list data.
Or prepare model object and put into an object which is holding hole form data
Link.
<html>
<head>
<title>$$HaskKey Remover</title>
<script src="https://code.angularjs.org/1.3.8/angular.min.js></script>
<script>
var myApp= angular.module('MyApp', []);
myApp.controller('MainCtrl', ['$scope',
function($scope) {
$scope.list = [
{key: "1", name: "Rose"},
{key: {id:2}, name: "Sachin"},
{key: {id:3}, name: "Sandy"}
];
console.log($scope.list);
}
]);
</script>
<head>
<title>Removing $$hashKey when using ng-options</title>
</head>
<body ng-app='MyApp'>
<div ng-controller='MainCtrl'>
<form>
<label for="Select Box">Make a choice of Players:</label>
<select name="selectBx" id="selectBx" ng-model="optionsData"
ng-options="item.name for item in list track by item.key">
</select>
</form>
</div>
</body>
</html>
I am giving AngularJS a bash and am trying a small test app where I have a list on the left and based on what is selected, update a form on the right to allow editing of parameters. This is the HTML
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="tstApp" ng-controller="tstCtrl">
<div>
<select size="2" style="width: 100px"
ng-model="selected"
ng-options="i as i.name for i in items track by i.name"
/>
</div>
<div>
<input type="text" name="descr" value="{{selected.descr}}"/><br/>
<input type="text" name="ref" value="{{selected.ref}}"/><br/>
</div>
<script src="test.js"></script>
</body>
</html>
and this is the JavaScript
var tstapp = angular.module('tstApp', [])
tstapp.controller('tstCtrl', function($scope) {
$scope.items = [
{
"name" : "ITEM1",
"descr" : "This is item1",
"ref" : "Reference1"
},
{
"name" : "ITEM2",
"descr" : "This is item2",
"ref" : "Reference2"
}
];
$scope.selected = $scope.items[0];
});
The problem with this is that when you actually change the description in the edit field, it remains like that and don't reflect the value of the array item any-more. I think the reason is probably obvious in that 'selected' is a copy of the array item and not the item it self. I can't seem to figure out how to edit the array item directly though that is currently selected.
You have to bind it as ng-model in order to get changes
Like this
<input type="text" name="descr" ng-model="selected.descr"/>
JSFIDDLE
is it possible to insert image also in the autocomplete dropdown in the typehead of angular JS UI
Yes, you can use a template to accomplish this.
<script type="text/ng-template" id="customTemplate.html">
<a>
<img ng-src="{{match.model.img}}" width="16"> {{match.model.name}}
</a>
</script>
The data bound to the typeahead is as follows:
$scope.results = [
{
name: "California",
img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png"
}, {
name: "Delaware",
img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png"
}, {
name: "Florida",
img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png"
}
];
Each result is a JSON object made up of a name and an image URL (img).
The HTML template displays the image using the img attribute of the matching result(s). To tell the typeahead to use the template you can use the typeahead-template-url:
<input type="text" ng-model="query" class="form-control" typeahead="name as result.name for result in results | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" />
See this Fiddle for a working example.
I need to call a js function when an ng-repeat template is created:
<div ng-repeat="item in items">
<input id="ip{{item.id}}">
<script>$(function () { $('#ip{{item.id}}').kendoDatePicker(); });</script>
</div>
The id is replaced as expected, but angular doesn't seem to work inside script tags.
That is correct, Angular will not evaluate expressions in script tags. You will need to use a directive that will initialize the Kendo plugin for each element.
The good news is Kendo already has a module for integrating with Angular, so you might as well just use that. Here is a plunk I put together showing it in a repeater.
<div ng-repeat="item in items">
<label for="{{item.id}}">{{item.id}}</label>
<div>
<input kendo-date-picker ng-model="item.value" />
</div>
</div>
Controller:
angular.module("demo", ['kendo.directives'])
.controller('DemoCtrl', ['$scope',
function($scope) {
$scope.items = [{
id: 'item1',
value: null
}, {
id: 'item2',
value: null
}, {
id: 'item3',
value: null
}, {
id: 'item4',
value: null
}];
}
]);