How to reflect orderby in parent scope? Also I already tried to use prototype inheritance without success using sortorder.val as ng-model. An help?
<body ng-controller="parentCtrl">
<table style="width:300px">
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr ng-repeat="contact in contacts | orderBy:sortorder">
<td>{{contact.name}}</td>
<td>{{contact.age}}</td>
</tr>
</table>
<br/>
<div ng-controller="childCtrl">
Order By:
<select ng-model="sortorder">
<option selected value="name">Name</option>
<option value="age">Age</option>
</select>
</div>
</body>
var app = angular.module('plunker', []);
app.controller('parentCtrl', ['$scope', function ($scope) {
$scope.sortorder = ['name'];
$scope.contacts = [
{name: 'Alfred', age: 37},
{name: 'Allan', age: 21},
{name: 'Dimmi', age: 17},
{name: 'Berta', age: 65},
{name: 'Chris', age: 25},
{name: 'Dora', age: 12}
];
app.controller('chilCtrl', function($scope) {
});
}]);
Plunk: http://plnkr.co/edit/bXGyund8v78Tal7lZ76O?p=preview
You have several errors in your code, that are signalled by the browser console:
the child controller is declared inside the parent controller: signalled in the browser console
it's declared as chilController instead of childController: signalled in the browser console
it uses an attribute of its scope instead of using an attribute of an object delared in the parent scope
Here's a working plunkr: http://plnkr.co/edit/KhOpx4nwezXHRAZr3nOl?p=info
var app = angular.module('plunker', []);
app.controller('parentCtrl', ['$scope', function ($scope) {
$scope.order = {
sortorder: 'name'
};
$scope.contacts = [
{name: 'Alfred', age: 37},
{name: 'Allan', age: 21},
{name: 'Dimmi', age: 17},
{name: 'Berta', age: 65},
{name: 'Chris', age: 25},
{name: 'Dora', age: 12}
];
}]);
app.controller('childCtrl', function($scope) {
});
and in the view:
<tr ng-repeat="contact in contacts | orderBy:order.sortorder">
...
<select ng-model="order.sortorder">
Related
I would like to show only my item.name from my object and I don´t know how to do it.
Here is my pen and now the "name" and "age" properties are being shown.
CodePen
<body>
<div ng-controller="Test">
<select ng-model="selectedItem" ng-options="k.name as v for (k,v) in items">
</select>
</div>
</body>
$scope.items has to be an array, then you can loop over items in your ng-options like this:
In your Angular controller
$scope.items = [
{name: 'Michael', age: 29},
{name: 'John', age: 29},
{name: 'Ronald', age: 29}
];
In your HTML
<select ng-model="selectedItem" ng-options="i.name for i in items"></select>
Forked your CodePen here.
my json look like below
$scope.peoples = [people:{
name: 'Mike ',
age: 20
}, people:{
name: 'Peter S ',
age: 22
}];
Notes: i can not change json structure.
here is my code where ng-repeat could not read json.
<div ng-controller="MyCtrl">
<table class="table table-hover">
<tr ng-repeat="p in peoples">
<td> Name: {{ p.name }} </td>
<td> Age: {{ p.age }} </td>
</tr>
</table>
</div>
var app = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.peoples = [people:{
name: 'Mike ',
age: 20
}, people:{
name: 'Peter S ',
age: 22
}];
}
Looks like your json array is defined in wrong way:
$scope.peoples = [{
name: 'Mike ',
age: 20
},{
name: 'Peter S ',
age: 22
}];
notice there is no people object. you defined people without an object. If you fix your json your code will work fine.
Here's the working code with json fix : http://jsfiddle.net/Lvc0u55v/2236/
Other way of fixing the existing code with the people object is, you move the people in javascript object as shown below:
Javascript:
$scope.peoples = [{
people : {
name: 'Mike ',
age: 20
}},{
people: {
name: 'Peter S ',
age: 22
}}];
Html:
<td> Name: {{ p.people.name }} </td>
<td> Age: {{ p.people.age }} </td>
This way your can use the people object. Here's the working code : http://jsfiddle.net/Lvc0u55v/2237/
Overall, i would recommend using first approach instead of second one.
i need to get the index on swipe
file.html
<ion-list>
<ion-item on-swipe-left="warn('Must use scope',$index)">
<div ng-repeat="item in items" style="border-bottom:2px #ccc solid ;"> {{item.name}}</div>
</ion-item>
</ion-list>
file.js
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function ($scope) {
$scope.items = [
{name: 'item1'},
{name: 'item2'},
{name: 'item3'},
{name: 'item4'},
{name: 'item5'}];
$scope.warn = function (message,$index) {
alert(message,$index);
};
});
This shows only my alert message not my index
could some one help me
If you are using ng-repeat to render your items, then you can get index by using $index of ng-repeat directive.
Below is the example,
<body ng-controller="MainCtrl">
<div ng-repeat="item in items" class="swipe" on-swipe-left="warn('Must use scope', $index)">Swipe div</div>
</body>
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function ($scope) {
$scope.items = [
{name: 'item1'},
{name: 'item2'},
{name: 'item3'},
{name: 'item4'},
{name: 'item5'}];
$scope.warn = function (message, index) {
alert(message, index);
};
});
This worked for me
<ion-list>
<ion-item on-swipe-left="warn('Must use scope',$index)">
<div on-swipe="onSwiipe($index)" ng-repeat="item in items" style="border-bottom:2px #ccc solid ;"> {{item.name}}</div>
</ion-item>
</ion-list>
$scope.items = [
{name: 'item1'},
{name: 'item2'},
{name: 'item3'},
{name: 'item4'},
{name: 'item5'}];
$scope.onSwiipe = function (ind) {
console.log('on swipe ', ind);
};
Im trying to figure out how the variables are called in angular. Im new to angularjs and cant seem to figure out why in the first example we are iterating in the ng-repeat 'group in $groups' and in the second example we are iterating over 'user in $data', i cant seem to figure out where $groups and $data come from and why i cant change the name on both examples and keep it working, so i can now how to call them in my own example.
First example: http://plnkr.co/edit/CBcbkc?p=preview
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {
var data = [{name: "Moroni", age: 50, role: 'Administrator'},
{name: "Tiancum", age: 43, role: 'Administrator'},
{name: "Jacob", age: 27, role: 'Administrator'},
{name: "Nephi", age: 29, role: 'User'},
{name: "Enos", age: 34, role: 'User'}];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
groupBy: 'role',
total: data.length,
getData: function($defer, params) {
var orderedData = params.sorting() ?
$filter('orderBy')(data, $scope.tableParams.orderBy()) :
data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
})
<table ng-table="tableParams" class="table">
<tbody ng-repeat="group in $groups">
<tr class="ng-table-group">
<td colspan="{{$columns.length}}">
<a href="" ng-click="group.$hideRows = !group.$hideRows">
<span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
<strong>{{ group.value }}</strong>
</a>
</td>
</tr>
<tr ng-hide="group.$hideRows" ng-repeat="user in group.data">
<td sortable="name" data-title="'Name'">
{{user.name}}
</td>
<td sortable="age" data-title="'Age'">
{{user.age}}
</td>
</tr>
</tbody>
</table>
Second example: http://plnkr.co/edit/HUe0e1zBGOG9oOyqpGq9?p=preview
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {
$scope.myValues = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.tableParams = new ngTableParams({
sorting: {
name: 'asc'
}
}, {
getData: function($defer, params) {
$defer.resolve($filter('orderBy')($scope.myValues, params.orderBy()));
}
});
});
<button ng-click="tableParams.sorting({})" class="btn btn-default pull-right">Clear sorting</button>
<p><strong>Sorting:</strong> {{tableParams.sorting()|json}}
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'" sortable="'name'">
{{user.name}}
</td>
<td data-title="'Age'" sortable="'age'">
{{user.age}}
</td>
</tr>
</table>
If you are trying to figure out how variables and angular works in general, THIS is a great tutorial.
If you're trying to figure out why you can't change the names in your examples, the answer is that you are using a custom directive called ng-table created by this guy to make life a little easier when dealing with tables in angular. Like if you wanted to "group" for example. So $data and $groups, are part of that.
In your example, you created a variable with a collection of objects in it called "myValues". That variable lives on the scope. You can access that data in the html, and use the ng-repeat from angular like so:
<table class="table">
<tr ng-repeat="user in myValues">
<td data-title="'Name'" sortable="'name'">
{{user.name}}
</td>
<td data-title="'Age'" sortable="'age'">
{{user.age}}
</td>
</tr>
</table>
Notice how you would no longer be using the directive "ng-table." user is defined in the html with your ng-repeat, you could just as easily call it "righteousDude in myValues" or "guy in myValues".
<table class="table">
<tr ng-repeat="righteousDude in myValues">
<td data-title="'Name'" sortable="'name'">
{{righteousDude.name}}
</td>
If you wanted the data name changed, you could change it where you define it in the .js file.
$scope.righteousDudes = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},.....ect
Just remember that ng-repeat is an angular directive that "instantiates a template once per item from a collection"
And your variable that you create in the ng-repeat...i.e. "user" represents that item. Hope that helps!
I'm trying to change which property I'm filtering by assigning the property name to a variable, but it's not working. Is there a way to accomplish this without writing my own filter? codepen
<div ng-app="app" ng-controller="main as m">
<input ng-model="keyword"/>
<p>Property: {{m.property}}</p> <!-- resolves to 'name' -->
<!-- does not work-->
<div ng-repeat="o in m.objects | filter:{m.property:keyword}">
{{o.name}}
</div>
<hr/>
<!-- works-->
<div ng-repeat="o in m.objects | filter:{name:keyword}">
{{o.name}}
</div>
</div>
If I understand your question right, I think this is what you are looking for.
Relevant code:
HTML:
<select ng-model="property" ng-change="clearSearch()">
<option>name</option>
<option>age</option>
<option>city</option>
</select>
<input ng-model="search[property]" />
<div class="box">
<div class="item" ng-repeat="item in data | filter:search">
{{item.name}} | {{item.age}} | {{item.city}}
</div>
</div>
Javascript:
var app = angular.module("myapp", []);
app.controller("main", function($scope){
$scope.search = {};
$scope.clearSearch = function(){
$scope.search.name = "";
$scope.search.age = "";
$scope.search.city = "";
}
$scope.property = "name";
$scope.data = [
{
name: "Robert",
age: 23,
city: "Orem"
},
{
name: "Alice",
age: 44,
city: "Nephi"
},
{
name: "Susan",
age: 12,
city: "Odgen"
},
{
name: "Henry",
age: 63,
city: "South Jordan"
},
{
name: "Frank",
age: 35,
city: "Provo"
},
{
name: "Albert",
age: 32,
city: "Payson"
},
];
});
In short, <div ng-repeat="o in m.objects | filter:{m.property:keyword}"> {m.property:keyword} is not a correct expression
Have you tried filter without the "m." in "m.property"?
<div ng-repeat="o in m.objects | filter:{property:keyword}">