I'm using the Ionic 1.3.16 version currently. Here i need to select multiple list items in the below list.
<div class="list listbox" ng-if="MemberData.length" ng-repeat="d in MemberData">
<div class="item item-avatar item-list-detail item-thumbnail-left thumnail_box">
<img ng-if="d.ThumbnailUrl" src="{{d.ThumbnailUrl}}" class="imground">
<div ng-if="d.ThumbnailUrl==''|| d.ThumbnailUrl==null" class="item-icon-left">
<div><i class="icon ion-person bgskyblue iconx dashboardsquare"></i></div>
</div>
<h3 class="spaceWrap"><b>{{d.Name}}</b></h3>
<p class="spaceWrap">
<span class="small"><i class="icon ion-location"> </i>{{d.Location}}</span>
</p>
</div>
</div>
Screen Shot of the list page:
Use the ng-click directive:
<div class="item" ng-click="clicked(d)" ng-class="{ active: d.selected }">
<h3 class="spaceWrap"><b>{{d.Name}}</b></h3>
</div>
controller:
var selected = [];
$scope.clicked = function (member) {
var index = selected.indexOf(member);
if(index > -1) {
selected.splice(index, 1);
member.selected = false;
} else {
selected.push(member);
member.selected = true;
}
}
JSFIDDLE
Related
Is anyone help me, when I start to code to show data in blade with angularJS, data not showing in the page, even the data exists in the console. This following code in my app.js
// app.js
$scope.view_tab = 'shop1';
$scope.changeTab = function(tab) {
$scope.view_tab = tab;
}
// List product
$scope.loadProduct = function () {
$http.get('/getproduct').then(function success(e) {
console.log(e.data);
$scope.products = e.data.product;
$scope.totalProduct = $scope.products.length;
$scope.currentPage = 1;
$scope.pageSize = 9;
$scope.sortKey = 'id_kain';
};
//index.blade.php
<div class="shop-top-bar">
<div class="shop-tab nav">
<a ng-class="{'active': view_tab == 'shop1'}" ng-click="changeTab('shop1')" data-toggle="tab">
<i class="fa fa-table"></i>
</a>
<a ng-class="{'active': view_tab == 'shop2'}" ng-click="changeTab('shop2')" data-toggle="tab">
<i class="fa fa-list-ul"></i>
</a>
</div>
</div>
<div class="shop-bottom-area mt-35">
<div class="tab-content jump">
<div class="tab-pane" ng-class="{active: view_tab == 'shop1'}">
<div class="row">
<div ng-repeat="data in filtered = ( products | filter:search ) | orderBy:sortData | itemsPerPage: 9" class="col-xl-4 col-md-6 col-lg-6 col-sm-6">
<div class="product-wrap mb-25 scroll-zoom">
<div class="product-img">
<a ng-click="showForm(data)">
<img class="default-img" ng-src="#{{ data.gambar_kain[0].gambar_kain }}" alt="">
<img class="hover-img" ng-src="#{{ data.gambar_kain[1].gambar_kain }}" alt="">
</a>
</div>
<div class="product-content text-center">
<h3>#{{data.nama_kain}}</h3>
<div class="product-price">
<span>#{{numberingFormat(data.data_kain[0].harga_kain)}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" ng-class="{active: view_tab == 'shop2'}">
<div dir-paginate="datas in filtered = ( products | filter:search ) | orderBy:sortData | itemsPerPage:9" class="shop-list-wrap mb-30">
<div class="row">
<div class="col-xl-4 col-lg-5 col-md-5 col-sm-6">
<div class="product-wrap">
<div class="product-img">
<a ng-click="showForm(datas)">
<img class="default-img" ng-src="#{{ datas.gambar_kain[0].gambar_kain }}" alt="">
<img class="hover-img" ng-src="#{{ datas.gambar_kain[1].gambar_kain }}" alt="">
</a>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-7 col-md-7 col-sm-6">
<div class="shop-list-content">
<h3>#{{data.nama_kain}}</h3>
<div class="product-list-price">
<span>#{{numberingFormat(datas.data_kain[0].harga_kain)}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pro-pagination-style text-center mt-30">
<dir-pagination-controls
max-size="1"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
</div>
Data still not shows in the page, there are not errors in this page, but I don't know how can I fix this.
As I know there is two way to show data in Angular JS when you define the scopes then you need the ng-bind or ng-model to show data in the front end.
1- AngularJS Data Binding
live Example https://www.w3schools.com/code/tryit.asp?filename=G2DQQ2GSJ3EO
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="firstname "></p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John will be change";
});
</script>
2-AngularJS ng-model Directive
Live Example https://www.w3schools.com/code/tryit.asp?filename=G2DQQEUEPSOC
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
NOTE: try with static data and then check that you have valid data to make it dynamic
I hope this helps you!
I have a expand and collapse list which I base on an example https://forum.ionicframework.com/t/accordion-list/2832.
My list is option list to choose and then search. The issue is it will change from expand to collapse when I search. When I search for the second time, it will change from collapse to expand again.
What I want is:
preset as collapse
expand and collapse only when it is manually clicked
Below is my html
<div class="item" ng-click="toggleGroup(group)"
ng-class="{active: isGroupShown(group)}">
<i class="icon" ng-class="isGroupShown(group) ? 'ion-
minus' : 'ion-plus'"></i>
<div class="row">
<div class="col boldText">Investment</div>
</div>
<div class="item" ng-if="isGroupShown(group)">
<div class="row centerized">
<div class="col col-40"></div>
<div class="col col-30">Min</div><div class="col col-30">Max</div>
</div>
<div class="row">
<div class="col col-40">Amount</div>
<div class="col col-30"><input type="number" placeholder="0" ng-model="searchQuery.yaMin"></div>
<div class="col col-30"><input type="number" placeholder="5" ng-model="searchQuery.yaMax"></div>
</div>
</div>
</div>
JavaScript:
$scope.toggleGroup = function(group) {
if ($scope.isGroupShown(group)) {
$scope.shownGroup = null;
} else {
$scope.shownGroup = group;
}
};
$scope.isGroupShown = function(group) {
return $scope.shownGroup === group;
};
Below is the jsddile (first time using)
https://jsfiddle.net/fhmLLa4u/
Im using some nice and simple drag-and-drop library from github, and I have a view with 3 different buttons each presenting a list when its being clicked in the same place but NOT on the same time.
From some reason only the first list can be sorted but the other 2 re not...I can move the objects but they are not droppable so I cant change the order.
this is my html:
<div>
<!-- list 1 button -->
<button md-button
(click)="showFirstList()"
class="md-primary">List 1
</button>
<!-- list 2 button -->
<button md-button
(click)="showSecondList()"
class="md-primary">List 2
</button>
<!-- list 3 button -->
<button md-button
(click)="ThirdList()"
class="md-primary">List 3
</button>
</div>
<md-content>
<div *ngIf="showingListOne">
<div dnd-sortable-container [dropZones]="['zone-one']" [sortableData]="listOneToDisplay | async">
<div class="list-bg" *ngFor="#item of listOneToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i">
ID: {{item.id}} <p></p> name: {{item.name}}
</div>
</div><br><br>
</div>
<div *ngIf="showingListTwo">
<div dnd-sortable-container [dropZones]="['zone-two']" [sortableData]="listTwoToDisplay | async">
<div class="list-bg" *ngFor="#item of listTwoToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i">
ID: {{item.id}} <p></p> age: {{item.age}}
</div>
</div>
</div>
<div *ngIf="showingListThree">
<div dnd-sortable-container [dropZones]="['zone-three']" [sortableData]="listThreeToDisplay | async">
<div class="list-bg" *ngFor="#item of listThreeToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i">
ID: {{item.id}} <p></p> age: {{item.age}}
</div>
</div>
</div>
</div>
</md-content>
this is my sorting-lists.component.ts:
#Component({
selector: 'sorting-lists',
styles: [require('./sorting-lists.css')],
directives: [DND_DIRECTIVES],
providers: [DND_PROVIDERS],
template: require('./sorting-lists.component.html')
})
#Injectable()
export class MyCmp implements OnInit {
listOneToDisplay = this._myService.getFirstListData();
listTwoToDisplay = this._myService.getSecondListData();
listThreeToDisplay = this._myService.getThirdListData();
showingListOne = false;
showingListTwo = false;
showingListThree = false;
constructor(private _myService: MyService) {
};
public showFirstList(): void {
this.showingListOne = true;
this.showingListTwo = false;
this.showingListThree = false;
}
public showSecondList(): void {
this.showingListTwo = true;
this.showingListOne = false;
this.showingListThree = false;
}
public showThirdList(): void {
this.showingListThree = true;
this.showingListTwo = false;
this.showingListOne = false;
}
}
if someone can help me figure out why only the first one is sortable it will be blessed!!
thanks :)
May be you should avoid use the "async" filter - look at this plnkr
export class AppComponent {
listDrinks:Array<string>=[];
listFamousPeople:Array<string> = [];
listMotorsysces:Array<string> = [];
constructor(_myService:myService) {
_myService.getDrinks().subscribe(drink => this.listDrinks = drink)
_myService.getPeople().subscribe(p => this.listFamousPeople = p);
_myService.getBikes().subscribe(m => this.listMotorsysces =m);
}
and in template:
<div class="col-sm-3">
<div class="panel panel-success">
<div class="panel-heading">
Favorite drinks
</div>
<div class="panel-body">
<ul class="list-group" dnd-sortable-container [sortableData]="listDrinks">
<li *ngFor="let item of listDrinks; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel panel-success">
<div class="panel-heading">
Famous People
</div>
<div class="panel-body">
<ul class="list-group" dnd-sortable-container [sortableData]="listFamousPeople">
<li *ngFor="let item of listFamousPeople; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel panel-success">
<div class="panel-heading">
Favorite Motorsysces
</div>
<div class="panel-body">
<ul class="list-group" dnd-sortable-container [sortableData]="listMotorsysces">
<li *ngFor="let item of listMotorsysces; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>
</ul>
</div>
</div>
</div>
This is used for match the following option.
While I drag the div id 'div2' along with this first div id 'div1' also to be dragged. how to set draggable false for div id 'div1'
.controller('BEGINNER_UNIT_1_CONVERSATION_ACTIVITY_2', function($scope, $stateParams, $http)
{
$scope.OnDropComplete = function (index, source)
{
var otherObj = $scope.category_Question[index];
var otherIndex = $scope.category_Question.indexOf(source);
$scope.category_Question[index] = source;
$scope.category_Question[otherIndex] = otherObj;
}
})
--------------------------------------------------------
<div ng-repeat="source in category_Question" ng-controller="BEGINNER_UNIT_1_CONVERSATION_ACTIVITY_2" >
<div class="card" id="div1" draggable="false">
<div class="item item-divider">{{ $index+1 }}.Sentence </div>
<div class="item item-text-wrap" style="color:#CC0066;font-weight:bold;">{{ source.Sentance }}</div>
</div>
<div class="card" id="div2" ng-drop="true" ng-drop-success="OnDropComplete($index,$data)">
<div ng-drag="true" ng-drag-data="source" ng-class="source.Response">
<div class="item item-divider">Response</div>
<div class="item item-text-wrap"> {{ source.Response }} </div>
</div>
</div>
</div>
--------------------------------------------------------
You're using the wrong attribute. draggable="false".
It should be ng-cancel-drag
Your html would look like:
<div class="card" id="div1" ng-cancel-drag>
...
</div>
My HTML is as follows:
<div class="cell">
<div class="offset-container pull-left">
<i data-ng-click="doCtrlStuff()"></i>
</div>
</div>
When you click the <i>, I want to add an active class to the parent that has .cell currently. How is this doable with AngularJS?
OK, according to your last comment, if your cells are in a loop you should have mentioned that in your question. I'm gonna assume you use ng-repeat.
I have something like this which works. The active class also get removed if you click another.
HTML:
<div ng-repeat="cell in [0,1,2]" data-ng-class="{cell:true, active:index=='{{$index}}'}">
<div class="offset-container pull-left">
<i data-ng-click="activate($index)">Activate Me</i>
</div>
</div>
Controller:
$scope.activate= function(index){
$scope.index=index;
};
Here is one way, using ng-class
<div class="cell" ng-class="{'active': isActive==true}">
<div class="offset-container pull-left">
<i data-ng-click="doCtrlStuff()">clicky</i>
</div>
</div>
controller:
function MyCtrl($scope) {
$scope.doCtrlStuff = function(){
$scope.isActive = true;
}
}
<div class="cell" ng-class="{'active': isActive}">
<div class="offset-container pull-left">
<i data-ng-click="isActive = !isActive"></i>
</div>
</div>
You can do this from here: http://docs.angularjs.org/api/ng.directive:ngClass
<div data-ng-class="{cell:true, active:clickedIcon}">
<div class="offset-container pull-left">
<i data-ng-click="doCtrlStuff()"></i>
</div>
</div>
You would use a class:boolean pattern for the ng-class expression.
And in your controller:
$scope.doCtrlStuff = function() {
$scope.clickedIcon = true;
}
UPDATE:
If you want to do a radio button:
<div data-ng-class="{cell:true, active:clickedDogIcon}">
<div class="offset-container pull-left">
<i data-ng-click="doDogStuff()"></i>
</div>
</div>
<div data-ng-class="{cell:true, active:clickedCatIcon}">
<div class="offset-container pull-left">
<i data-ng-click="doCatStuff()"></i>
</div>
</div>
$scope.doDogStuff = function() {
$scope.clickedDogIcon = true;
$scope.clickedCatIcon = false;
}
$scope.doCatStuff = function() {
$scope.clickedDogIcon = false;
$scope.clickedCatIcon = true;
}