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);
};
Related
Some time back I was looking for multi select checkbox group option in angularjs. I could not able to find my self on stackoverflow, Since i have developed it and sharing here js fiddle link.
<div ng-app="check">
<div ng-controller="controller">
<ul>
<li ng-repeat="(key, item) in basket"> {{item.type}}
<ul>
<li ng-repeat="(sub_catkey, sub_catval) in item.fields">
<label>
<input type="checkbox" ng-model="sub_catval.checked" /> {{sub_catval.name}} -- {{sub_catval.checked}} | json
</label>
</li>
</ul>
</li>
</ul>
Selected show here
<li ng-repeat="(key, item) in basket"> {{item.type}}
<ul>
<li ng-repeat="(sub_catkey, sub_catval) in item.fields | filter: true">
<label>
{{sub_catval.name}} -- {{sub_catval.checked}}
</label>
</li>
</ul>
</li>
{Manager: {Name: filter.key}}
{{basket}}
angular.module('check', [])
.controller('controller', function($scope) {
$scope.basket = [
{
"type": "fruits",
"fields": [
{name: 'Apple', checked:false},
{name: 'Mango', checked:true},
{name: 'Banana', checked:false},
{name: 'Guava', checked:false},
{name: 'Orange', checked:false}
]
},
{
"type": "flowers",
"fields": [
{name: 'rose', checked:true},
{name: 'lilly', checked:false},
{name: 'tulip', checked:false},
{name: 'marigold', checked:false},
{name: 'sunflower', checked:false}
]
}
];
$scope.selected = {
fruits: ["Apple"],
flowers: []
};
$scope.checkAll = function() {
$scope.basket = angular.copy($scope.basket);
};
$scope.uncheckAll = function() {
$scope.selected.fruits = [];
};
});
http://jsfiddle.net/42y83eLb/
On my home page I added a button named 'city'. On clicking it opens a popup listing the city names. On clicking the city 'paris' the data with city name must be displayed.
homepage
<ion-header-bar class="bar bar-subheader">
<button class="button button-flat button-positive"ng-click="citypopup();" style="padding-right: 63px;
padding-left: 18px;">
<l >City </l>
<l class="icon ion-chevron-down"></l>
</button>
</ion-header-bar>
<ion-content>
<div class='card ' ng-repeat="item in list | filter:test.searchCity ">
<div class="list " >
<div class='item' style="padding-top:0px;" > {{item.id}}
<l class="item-icon-right" style="padding-left:30%"> {{item.date}} </l>
</div>
<div class='item' style="padding-top:0px;" >{{item.status }}
<l class="item-icon-right" style="text-align:right;">{{item.QCstatus}}</l>
<i class="icon ion-chevron-right"></i>
</div>
<b class='item '> {{item.Factory}} </b>
<l class='item '>{{item.city }}</l>
</div>
popup page
<ion-list>
<ul class="list" ng-model="test.searchCity" ng-repeat="ci in cityList | orderBy:'city' " >
<li class="item" ng-click="test.searchCity">{{ci.city}} </li>
</ul>
</ion-list>
javascript
$scope.test = {
searchCity: null,
};
$scope.cityList = [
{
"city": "Chennai"
}, {
"city": "Banglore"
}, {
"city": "Delhi"
}
];
$scope.list = [
{
id: "#001",
date:"DEC 04 2016",
status: "Successful",
QCstatus: "Approve",
Factory: "ARUN ICE CREAM",
city: "paris"
},
{
id: "#002",
date: "JAN 11 2016",
status: "Successful",
QCstatus: "Approve",
Factory: "Floxtronics",
city: "Delhi"
},
{
id: "#003",
date: "Feb 14 2016",
status: "Bug fixing",
QCstatus: "Approve",
Factory: "Aachi",
city: "Chennai"
}
];
$scope.$watch('test.searchCity', function () {
$scope.test.searchCity = null;
console.log('test.searchCity')
});
$scope.citypopup = function() {
var myPopup = $ionicPopup.show({
scope: $scope,
templateUrl: 'templates/cityTemplate.html',
buttons: [
{ text: 'Cancel',
type: 'button-positive' },
]
});
}
What I need is when I click 'city' button, my city popup appears and when I click on a city nothing happens! Could someone help me?
No need to create another popup page, you can open popup content in citypopup() function
$scope.citypopup = function() {
$scope.popup = $ionicPopup.show({
template:"<ion-list><ul class='list' ng-model='test.searchCity' ng-repeat='ci in cityList | orderBy:city ' ><li class='item' ng-click='searchCity(ci.city)'>{{ci.city}} </li> </ul></ion-list>" ,
title: 'City',
scope: $scope
});
}
$scope.searchCity = function(city){
$scope.test.searchCity = city;
$scope.popup.close();
}
You never assign test.searchCity.
In you popup page code you use ng-click="test.searchCity", where you probably should use ng-click="test.searchCity = ci.city".
Unrelated to your problem (but a matter of correct use of patterns): No need for ngModel in a ul element (it's only for form elements), and ng-repeat makes more sense when used on lis rather than uls.
In conclusion:
<ion-list>
<ul class="list">
<li class="item" ng-repeat="ci in cityList | orderBy:'city' " ng-click="test.searchCity = ci.city">{{ci.city}} </li>
</ul>
</ion-list>
In javascript, I have two arrays of objects and am trying to create dropdowns in the html using angular.js:
$scope.members=[
{name: "Paul", position: "Vocals"},
{name: "John", position: "Guitar"},
{name: "George", position: "Guitar"},
{name: "Ringo", position: "Drums"}
];
$scope.positions=[
{label: "Guitar"},
{label: "Vocals"},
{label: "Drums"}
];
HTML:
<select>
<option ng-repeat="position in positions">
{{member.position}}
</option>
</select>
The current HTML is taking the member's position and duplicating it 3 times as the only option in the dropdown. For example, upon loading the page, Ringo's position is preselected as "drums" in the dropdown (that's the way it should be). But when clicking on the dropdown,the options for Ringo are "drums" and "drums", and "drums". They should be "drums", "vocals", and "guitar".
Is there a way to have all the options available AND have the correct one preselected on loading? What's the proper directive?
AngularJS has a directive specifically for select controls. Use it instead of ng-repeat
https://docs.angularjs.org/api/ng/directive/ngOptions
working plunkr
var app = angular.module('plunker', []);
app.controller("MyCtrl", function ($scope) {
$scope.members = [
{name: "Paul", position: "Vocals", alive: true},
{name: "John", position: "Guitar", alive: false},
{name: "George", position: "Guitar", alive: false},
{name: "Ringo", position: "Drums", alive: true}
];
$scope.positions = [
{label: "Guitar"},
{label: "Vocals"},
{label: "Drums"}
];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.9/angular.js" data-semver="1.3.9"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="member in members">
{{member.name}}
<select ng-options="position.label as position.label for position in positions" ng-model="member.position"></select>
<input type="checkbox" ng-model="member.alive">Alive?</input>
</li>
</ul>
<pre>
{{members | json}}
</pre>
</div>
</body>
</html>
<select ng-model="selectedBeetle" ng-options="member as member.name for member in members"></select>
<select ng-model="selectedBeetle.position" ng-options="position.label for position in positions"></select>
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">
I have items I want to show, normally by using ng-repeat. I want to show the in some order (easy), but whenever the ordered attribute changes, I want some HTML in-between.
Example: (Fiddle):
<div ng-app ng-controller="Main">
<div ng-repeat="item in items | orderBy:'role'">
{{item.role}} - {{item.name}}
</div>
</div>
function Main($scope){
$scope.items = [{name: 'First', role: 1},
{name: 'Second', role:2},
{name: 'Third', role: 1},
{name: 'Fourth', role: 2}];
}
I want it to print:
1 - First
1 - Third
(some separator kode)
2 - Second
2 - Fourth
You will want to create a function in your scope.
$scope.currentRole = 'something';
$scope.CreateHeader = function(role) {
showHeader = (role!=$scope.currentRole);
$scope.currentRole = role;
return showHeader;
}
And then in your HTML:
<div ng-app ng-controller="Main">
<div ng-repeat="item in items | orderBy:'role'">
<div ng-show="CreateHeader(item.role)">
something here for the header
</div>
{{item.role}} - {{item.name}}
</div>
</div>
The solution by #lucuma only works on the first time through the loop. If Angular refreshes the list, the variable will still be set from the previous loop.
Instead, I added a new attribute to the list (say, header) during initialization:
function Main($scope){
$scope.items = [{name: 'First', role: 1, header: false},
{name: 'Second', role:2, header: false},
{name: 'Third', role: 1, header: true},
{name: 'Fourth', role: 2, header: false}];
}
Then the HTML by #lucuma works:
<div ng-app ng-controller="Main">
<div ng-repeat="item in items | orderBy:'role'">
<div ng-show="item.header"> // <== with this change
something here for the header
</div>
{{item.role}} - {{item.name}}
</div>
</div>
Oh, and you could sort the list once at initialization and remove the orderBy filter.