I have a HTML table that has the id set with a databind inside of a ng-repeat
<div class="project" ng-repeat="project in data.projects">
<h2>
{{projectState.name}}
</h2>
<table class="table" id="{{project.name + selectedType}}">
...
</table>
...
</div>
This properly sets the id as expected, but I need to use this id in a ng-click call.
<button ng-click="export({{project.name + selectedType}})">
...
</button>
This produces the error when the page loads
Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 16 of the expression [export({{project.name + selectedType}})] starting at [{project.name + selectedType}})].
How do I properly reference the databound id of {{project.name + selectedType}} in a ng-click?
Pass project.name and selectedType as 2 arguments to export method :
<button ng-click="export(project.name,selectedType)">
...
</button>
and inside export method concatenate them:
$scope.export = function(name, type){
var val = name + type;
// ...
}
or just remove {{ }} from export
You don't need to give an expression inside of export(). This should be resolved using
export(project.name,selectedType)
angular.module('myApp',[])
.controller('myCtlrl',function($scope){
$scope.projects=[
{ id: 1, name: 'John', address: 'Highway 71'},
{ id: 2, name: 'Peter', address: 'Lowstreet 4'},
{ id: 3, name: 'Amy', address: 'Apple st 652'},
{ id: 4, name: 'Hannah', address: 'Mountain 21'},
{ id: 5, name: 'Michael', address: 'Valley 345'},
{ id: 6, name: 'Sandy', address: 'Ocean blvd 2'},
{ id: 7, name: 'Betty', address: 'Green Grass 1'},
{ id: 8, name: 'Richard', address: 'Sky st 331'},
{ id: 9, name: 'Susan', address: 'One way 98'},
{ id: 10, name: 'Vicky', address: 'Yellow Garden 2'},
{ id: 11, name: 'Ben', address: 'Park Lane 38'},
{ id: 12, name: 'William', address: 'Central st 954'},
{ id: 13, name: 'Chuck', address: 'Main Road 989'},
{ id: 14, name: 'Viola', address: 'Sideway 1633'}
];
$scope.export=function(id){
alert(id);
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtlrl">
<div class="project">
<table class="table" id="{{project.name + address}}" border=1>
<tr><th>ExportButton</th><th>Id</th><th>Name</th><th>Address</th></tr>
<tr ng-repeat="project in projects">
<td><button ng-click="export(project.name+project.address)">Export</button></td>
<td>{{project.id}}</td>
<td>{{project.name}}</td>
<td>{{project.address}}</td>
</tr>
</table>
</div>
</div>
When you are using ng-click, it means you are already in angular scope so you don't need to use {{}} to call a function or evaluate the expression
Related
The problem is that I have a list of people and their city id. I want to get the city name based on their id from another list by a function.
<table class="table">
<tr>
<th>#</th>
<th>Name</th>
<th>Type</th>
<th>City</th>
</tr>
<tr ng-repeat="item in samples">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.type}}</td>
<td>{{getCity(item.city)}}</td>
</tr>
</table>
and the controller:
$scope.samples = [
{id: 1, name: "alex", type: "Average", city: 12},
{id: 2, name: "Alex", type: "Average", city: 12},
{id: 3, name: "Mia", type: "Medium", city: 13},
{id: 4, name: "Sasha", type: "Top", city: 14},
{id: 5, name: "Eric", type: "Top", city: 12},
{id: 6, name: "Taz", type: "Average", city: 14},
{id: 7, name: "Normai", type: "Low", city: 13},
{id: 8, name: "Jim", type: "Average", city: 11}];
$scope.city = [
{id: 11, name: "Dallas"},
{id: 12, name: "Los Angeles"},
{id: 13, name: "New York"},
{id: 14, name: "Washington"}
];
$scope.getCity = function(name) {
angular.forEach($scope.city, function(value, key){
if(value.id == name){
$scope.city_name = value.name;
}
return $scope.city_name;
});
}
Here is a Fiddle for more details.
you are return value at wrong place. I just update the jsfiddle you can check here.
Here is the changes of the code.
$scope.getCity = function(name) {
$scope.city_name = "";
angular.forEach($scope.city, function(value, key){
if(value.id == name){
$scope.city_name = value.name;
}
});
return $scope.city_name;
}
}]);
Try this function
$scope.getCity = function(id) {
var city = $scope.city.filter(function(c){ return angular.equals(c.id, id); })[0];
return city.name;
}
Data should be displayed based on the options field (by ng-repeating) (please see below). For example, if user picks 'The Best Company Denim', only users belonging to that company should be displayed. I tried out filter but that doesn't seem to work, I have tried to write a function that checks for the chosen option which works but then I don't know how to display that (tried to loop through the users array and add to a new array, then ng-repeat through that array). anyone can help? Thanks!!!!
<div ng-app="app" ng-controller="appCtrl">
<select ng-model="selectedAccount" ng-options="account.name for account in companies" ng-change="change()">
</select>
<div ng-repeat="company in companies">
<div ng-repeat="user in company.users">
<p>{{user.firstName}} | filter: 'selectedAccount'</p>
</div>
<div>
</div>
app.controller('appCtrl', function($scope){
$scope.companies = [{
name: 'The Best Company Denim',
users: [{
firstName: 'Alex',
lastName: 'D',
number: 1234
}, {
firstName: 'Sarah',
lastName: 't',
number: 14
}, {
firstName: 'J',
lastName: 'd',
number: 07
}]
}, {
name: 'The Best Company Elegant',
users: [{
firstName: 'Alx',
lastName: 'B',
number: 1234
}, {
firstName: 'Seth',
lastName: 'w',
number: 12
}, {
firstName: 'J.S',
lastName: 'B',
number: 7
}]
}, {
name: 'The Best Company by Julia',
users: [{
firstName: 'Aleddddx',
lastName: 'l',
number: 1234
}, {
firstName: 'Maggy',
lastName: 'n',
number: 1
}, {
firstName: 'Ja',
lastName: 'Key',
number: 123
}]
}]
$scope.change = function() {
var x = "";
for (var i = 0; i < $scope.selectedAccount.users.length; i++) {
console.log($scope.selectedAccount.users[i])
x += $scope.selectedAccount.users[i]
}
return x;
}
});
At first, you're using filter in a incorrect way.
Filter is used for arrays. So you must use like this:
<div ng-repeat="element in array | filter: param">
In your specific case, you want to filter the elements in array by the name property. So you should write the following:
<div ng-repeat="company in companies | filter: { name: selectedAccount }">
Also, in your ng-options, in order to bind the name of company to the selectedAccount variable use the as syntax:
<select ng-model="selectedAccount" ng-options="account.name as account.name for account in companies">
</select>
Please refer to the following snippet:
(function() {
"use strict";
angular
.module('app', [])
.controller('appCtrl', function($scope) {
$scope.companies = [{
name: 'The Best Company Denim',
users: [{
firstName: 'Alex',
lastName: 'D',
number: 1234
}, {
firstName: 'Sarah',
lastName: 't',
number: 14
}, {
firstName: 'J',
lastName: 'd',
number: 7
}]
}, {
name: 'The Best Company Elegant',
users: [{
firstName: 'Alx',
lastName: 'B',
number: 1234
}, {
firstName: 'Seth',
lastName: 'w',
number: 12
}, {
firstName: 'J.S',
lastName: 'B',
number: 7
}]
}, {
name: 'The Best Company by Julia',
users: [{
firstName: 'Aleddddx',
lastName: 'l',
number: 1234
}, {
firstName: 'Maggy',
lastName: 'n',
number: 1
}, {
firstName: 'Ja',
lastName: 'Key',
number: 123
}]
}];
});
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="appCtrl">
<div>
<select ng-model="selectedAccount" ng-options="account.name as account.name for account in companies">
</select>
<hr>
<div>
Selected company: {{selectedAccount}}
</div>
<hr>
<div ng-repeat="company in companies | filter: { name: selectedAccount }">
<div ng-repeat="user in company.users">
<p>{{user.firstName}}</p>
</div>
<div>
</div>
</div>
</div>
</body>
</html>
Note that you even don't need to call the (ng-change) anymore.
Here I have a select, where I want to repeat the contacts on the supplier.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl">
Hello {{name}}
<div ng-repeat="supplier in suppliers">
{{supplier.name}}
<select ng-options="contact.id as contact.name for contact in supplier.contacts">
</select>
</div>
</div>
<script>
var app = angular.module('app',[]);
//app.directive('appDirective', function() {});
//app.factory('appService', function() {});
app.controller('AppCtrl', ['$scope', function($scope){
$scope.name = "dave";
$scope.suppliers = [
{id: 0, name: "dave", contacts : [
{id: 0, name: 'c1'},
{id: 1, name: 'c2'},
{id: 2, name: 'c3'},
{id: 3, name: 'c4'},
]},
{id: 1, name: "Steve", contacts : [
{id: 0, name: 'c1'},
{id: 1, name: 'c2'},
{id: 2, name: 'c3'},
{id: 3, name: 'c4'},
]}
]
}]);
</script>
Here I have the controller.
How come this doesn't seem to work?
http://jsfiddle.net/gnosticdave/091vpadb/1/
contacts is part of each supplier - so your array is actually supplier.contacts
select ng-options="contact.id as contact.name for contact in supplier.contacts"
^^^^^^^^^^^^^^^^^^^^
Also, ngOptions needs an ngModel
Demo: http://jsfiddle.net/091vpadb/3/
Change:
<select ng-options="contact.id as contact.name for contact in contacts">
to:
<select ng-options="contact.id as contact.name for contact in supplier.contacts">
The JSON :
$scope.results=[
{
id: 1,
name: null,
class: "First"
},
{
id: 2,
name: John,
class: "First"
},
{
id: 3,
name: Mary,
class: "Second"
},
{
id: 4,
name: null,
class: "Third"
}
]
HTML:
<div class="col-md-6 form-group" data-ng-repeat="item in results| filter:{name:'!null'}">{{item.name}}</div>
I wanted to filter out the data that has name with value null.What's wrong with my code?
your json formate is not proper try this
plunker link http://plnkr.co/edit/H94f6XhyyhbvJ3F25NoA?p=preview
$scope.results=[
{
id: 1,
name: null,
class: "First"
},
{
id: 2,
name: "John",
class: "First"
},
{
id: 3,
name: "Mary",
class: "Second"
},
{
id: 4,
name: null,
class: "Third"
}
];
Solved it by adding this piece of code:
<div class="col-md-6 form-group" data-ng-repeat="item in results| filter:{name:'!!'}">{{item.name}}</div>
I hope someone can help me.
For my current project in angular 1.3 I'm using this list:
$scope.myList = [{
id: "obj1",
content: [{
id: 1,
name: 'attr 1'
}, {
id: 2,
name: 'attr 2'
}, {
id: 3,
name: 'attr 3'
}]
}, {
id: "obj2",
content: [{
id: 4,
name: 'attr 4'
}, {
id: 5,
name: 'attr 5'
}, {
id: 6,
name: 'attr 6'
}]
}, {
id: "obj3",
content: [{
id: 7,
name: 'attr 7'
}, {
id: 8,
name: 'attr 8'
}, {
id: 9,
name: 'attr 9'
}]
}];
I would like to get the object which has the id X in the content array.
I used this ng-repeat:
<ul>
<li ng-repeat="item in myList | filter: {content: [{id:1}]}">
{{item}}
</li>
</ul>
When I use id:1, id:4 or id:7 it works, but not for the other ids...
Has anyone any ideas?
Edit
I FINALLY found out what caused the problem, I was using angular 1.3.0. After upgrading to 1.3.11 it worked!!
You can filter based on nested properties like so:
<li ng-repeat="item in myList | filter: {content: {id: '1'}}">
{{item}}
</li>
It's important to note that the "object" (that has the id X) you'll get will be at the item level.