Good day! Im fairly new to ionic and mobile dev. Im making a simple reminder app and Im implementing ion-toggle
Here what my code looks like,
<ion-item class="item-avatar" ng-repeat="med in meds.medications" >
<img ng-src={{med.medicine.image_url}} style="top: 25px;">
<div class="row">
<div class="col col-50 col-center">
<h2>{{ med.medicine.name }}</h2>
<p>{{ med.dose +' '+med.type }}</p>
<p style="font-weight: bold" >{{ med.time }}</p>
</div>
<div class="col" style="border: 0">
<ion-toggle ng-checked="!med.status" toggle-class="toggle-calm" style="border: 0;"> </ion-toggle>
</div>
</div>
<ion-option-button class="button-positive" ng-click="meds.showEditMed(med)">Edit</ion-option-button>
<ion-option-button class="button-assertive" ng-click="meds.showDeleteMed(med)">Delete</ion-option-button>
</ion-item>
I have a very weird problem, whenever I put ng-change on my ion-toggle, the option button shows up. Ive looked up the net for some solutions, none of which have this the same problem.
Here is an image of my problem
Thank you very much for your help
Use ng-model on ion-toggle, here is the sample code:
<ion-toggle ng-model="someVariable" ng-checked="!med.status" toggle-class="toggle-calm" style="border: 0;"> </ion-toggle>
ooops, my bad. I forgot to put ng-model on the ion-toggle.
Related
Why the ion-item will increase infinitely?
The json allItems like this:{'tag1':[],'tag2':[],'tag3':[]}
,every time change slide each array will add 10 data,but the array is increase infinitely.
<ion-slide id="{{key}}" style="width:100%;" ng-repeat="(key,value) in allItems" ion-slide-tab-label=“{{key}}”>
<ion-content style="width:100%;">
<ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
<div>
<ion-list>
<ion-item class="item-thumbnail-left"
ng-click="detail(item.url,item.docid,item.title,item.imglink,item.openid)"
ng-repeat="item in value track by $index">
<img src="'https://'+{{item.imglink}}" alt="" />
<h2 ng-bind="item.title"></h2>
<span ng-bind="item.sourcename"></span>
<span ng-bind="item.date"></span>
<span ng-bind="item.tatalComment"></span>
</ion-item>
</ion-list>
</div>
<ion-infinite-scroll immediate-check="false" ng-if="more" on-infinite="getMore()" distance="1%"></ion-infinite-scroll>
</ion-content>
</ion-slide>
Your code is not clear. If you provide js part i can help correctly but my opinions are:
You are using infinite scroll in ng-repeat this is wrong. Every time you are adding it creates infinite scroll again.
You forgot to broadcast scroll completed?
$scope.$broadcast('scroll.infiniteScrollComplete');
I have some group of buttons in angular material code, so I want to make the first button as default, where it shows the content of that button on right side.
I have written some code like below, it shows the result after I clicked the button.
<div layout="row" layout-align="space-between">
<div class="list" style="width:30%;height:50px">
<div layout="column" ng-repeat="lists in vm.result | filter:searchText">
<div layout="row" layout-align="space-around">
<md-button class="md-raised" ng-click="vm.showItems(lists._id)">{{lists.wName}}'s Wish List {{$index}}</md-button>
<a style="margin-top:14px; cursor:pointer">{{lists.wType}}</a>
</div>
</div>
</div>
<div class="listItems" style="width:68%;height:400px;">
<div flex-xs flex-gt-xs="30" layout="row" ng-show="vm.showOnClick">
<md-card ng-repeat="product in vm.result" flex="30" style="max-width: 50%;">
<md-card-title>
<md-card-title-text>
<span class="md-subhead">{{product.Product_Name}}</span>
</md-card-title-text>
</md-card-title>
<md-card-title-media style="margin-left: -80px;">
<img ng-src="{{ product.Image }}" class="md-card-image" alt="Image here">
</md-card-title-media>
<md-card-title-text>
<span><span class="md-subhead" style="font-weight: bold; padding:2px;">Price: </span> {{ product.Price }}</span><br/>
<span><span class="md-subhead" style="font-weight: bold; padding:2px;">Brand:</span> {{ product.Brand }}</span><br/>
<span><span class="md-subhead" style="font-weight: bold; padding:2px;">Category: </span> {{ product.Category }}</span><br/>
</md-card-title-text>
</md-card>
</div>
</div>
What you are trying to achieve is to have the first item selected as default when your page is displayed. To do this, your controller should run the showItems method for the first item in the list once they have loaded.
I don't know what your controller or service looks like, but it would be something like (in your controller)
itemsService.loadItems().then(function(items) {
showItems(items[0]);
});
I'm using md-switch to display a toggle inside of an Angular app. When I click the line it's on, anywhere, the switch toggles. But I've got the switch on a line with other controls so I only want it to toggle when the actual switch is clicked, not some content outside it. How do I instruct it to behave like this?
Snippet:
<md-list-item class="md-1-line" ng-repeat="rule in vm.rules | filter:{name:groupedRule.name}">
<div style="width: 40px;">{{rule.threshold}}</div>
<div flex>
<md-slider min="10" max="40" ng-model="rule.threshold">
</md-slider>
</div>
<div style="width: 40px;">
<md-switch ng-model="rule.enabled"></md-switch>
</div>
Update
Here's a code pen demonstrating the issue: http://codepen.io/jsiegmund/pen/repwyR
Update
Issue #7937 on GitHub: https://github.com/angular/material/issues/7937#issuecomment-207793522
As of current date, the correct solution to this issue is to add class like this:
<md-list-item class="md-no-proxy">
This will prevent the entire line of list item to be clickable.
md-list-item documentation link
You could replace md-list-item with a div - CodePen
Markup
<div ng-controller="SwitchDemoCtrl" ng-app="MyApp">
<md-list>
<div layout="row" layout-align="center center">
<div style="width: 40px;"> {{ data.threshold }} </div>
<div flex>
<md-slider min="10" max="30" step="1" ng-model="data.threshold">
</md-slider>
</div>
<div layout-align="end center" flex-offset="5">
<md-switch ng-model="data.cb1" aria-label="Switch 1">
Switch 1: {{ data.cb1 }}
</md-switch>
</div>
</div>
</md-list>
</div>
I have an Onsen-UI template/index where I have a carousel and have each carousel-item calling a ons-template id (html). One of those templates is calling for ng-controller (which is calling for json api) and has usual javascript within it.
If I view the index.html in Chrome, the list shows but when I build it as phonegap app and run the apk on my android device, the list never appears. It just loads in a loop without 'loading' it.
Also, when I click on a list item it should take me to another html template to display the correct information and where (page.html), which Chrome doesn't do (could be just an issue in chrome).
I'm hoping if I get the list to display on my app, then the second part would fix itself or do I need to do some extra tweaking?
Here is my template code calling the controller:
<ons-template id="news.html">
<ons-page>
<div class="app-page opacity-bar">
<div class="app-page-content">
<div class="app-page news-page" ng-controller="newsController" data-ng-init="getAllRecords()">
<ons-list modifier="news">
<ons-list-item modifier="chevron" class="list-item-container" ng-repeat="item in items" ng-click="showPost($index)">
<ons-row>
<ons-col width="95px">
<img ng-show="{{ item.thumbnail_images }}" ng-src="{{ item.thumbnail_images.thumbnail.url }}" class="thumbnail">
</ons-col>
<ons-col>
<div class="name">
{{ item.title | limitTo: 15 }}...
</div>
<div class="location" ng-show="{{ item.categories }}">
<i class="ion-pricetags"></i> <span ng-repeat="cat in item.categories">{{cat.title}} </span>
</div>
<div class="desc">
{{ item.excerpt | htmlToPlaintext | limitTo: 60 }}...
</div>
</ons-col>
<ons-col width="40px"></ons-col>
</ons-row>
</ons-list-item>
</ons-list>
<ons-button id="moreButton" modifier="large" should-spin="{{isFetching}}" ng-click="nextPage()">more news</ons-button>
</div></div></div>
</ons-page>
</ons-template>
The carousel is very weak, bad implemented, i have same issue too, and the support is NULL
May be this link will help for you, Check with the code
<ons-page>
<ons-toolbar>
<div class="center">Carousel</div>
</ons-toolbar>
<ons-carousel ng-controller="CarouselController" swipeable auto-scroll fullscreen var="carousel">
<ons-carousel-item style="background-color: gray;">
<div class="item-label">GRAY</div>
</ons-carousel-item>
<ons-carousel-item style="background-color: #085078;">
<div class="item-label">BLUE</div>
</ons-carousel-item>
<ons-carousel-item style="background-color: #373B44;">
<div class="item-label">DARK</div>
</ons-carousel-item>
<ons-carousel-item style="background-color: #D38312;">
<div class="item-label">ORANGE</div>
</ons-carousel-item>
<ons-carousel-cover>
<div class="bullets">
<span
ng-repeat="idx in indices"
ng-class="{'active': idx === carousel.getActiveCarouselItemIndex()}">
•
</span>
</div>
</ons-carousel-cover>
</ons-carousel>
</ons-page>
I'm losing my mind with this code:
<div class=" col-md-3 col-lg-2 hidden-xs hidden-sm">
<div class="panel-group" id="mainMenuCollapsible">
<div ng-repeat="item in menuItems">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#mainMenuCollapsible" href="#collapse_{{ $index }}">
{{ item }}
</a>
</h4>
</div>
<div id="collapse_{{ $index }}" class="panel-collapse collapse" >
<div class="panel-body">
BLA BL
</div>
</div>
</div>
</div>
</div>
</div>
There no chance to get this working. When I click the title of any panels page reloads showing the panel selected but with no visual effects. My code is exactly the same as bootstrap example.
I have all jss in the right place (jquery 2.0.3, bootstrap.min 3.0.2, angular 1.2).
I also tried removing ng-repeat and doing with a single panel with no luck. What am I missing? Many thanks.
Solved my self. It's angular that intercept the route #collapse_X. Using data-target instead of href:
data-target="#collapse_{{ $index }}"
solved perfectly!
Hope this helps someone.