Hello I'm doing an hybrid app using Ionic Framework, but I think my mistake it's more from angular.
I got this view:
<ion-view class="back" ng-controller="webCtrl" view-title="{{tipo[id].title}}">
<ion-content>
<ion-list>
<div ng-controller="WebminarsCtrl">
<div ng-repeat="group in groups">
<ion-item class="item-dark" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}">
<i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
{{group.name}}
</ion-item>
<ion-item menu-close class="item-accordion" ng-repeat="item in group.items" ng-show="isGroupShown(group)">
<p ng-bind-html="item.mapa"></p>
<p ng-bind-html="item.contenido"></p>
</ion-item>
</div>
</div>
</ion-list>
</ion-content>
</ion-view>
But the ng-bind-html isn't working, in my controller I had this:
.controller('WebminarsCtrl', function($scope, $state) {
$scope.id = $state.params.id;
$scope.groups = [];
$scope.groups[0] = {
name: 'Tec de Monterrey',
items: []
};
$scope.groups[0].items[0] = {
contenido:'Horarios',
mapa: '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3764.2253262010768!2d-99.26264758551588!3d19.359393748034964!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d200c0fa04d82b%3A0x5e726f97d5cf3c8b!2sTecnol%C3%B3gico+de+Monterrey+Campus+Santa+Fe!5e0!3m2!1sen!2smx!4v1459638056684" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>'
};
})
And the the view doesn't display the map that the variable had, but the contenido variable it's working without problems.
Any help will be appreciated.
Add angular-sanitize.js Angular sanitize / ng-bind-html not working?
If that doesn't help then try using $sce.trustAsHtml as a filter $sce
Easy example how to use it with out making a filter https://stackoverflow.com/a/18342738/5136207
Related
I'm currently working on my first Ionic app and with it my first exposure to Angular. My current hurdle is injecting group headers ("A", "B", "C", and so on) into a longish list (~600) of alphabetically sorted names. I've looked into solutions with filters, nested ngRepeats (which, specifically, didn't seem to play nice with Ionic's collection-repeat), but would like to accomplish this without the need for filtering or third-party dependencies like lodash or underscores.
My current target solution is to use a directive to prepend the header to the first element of each group of names.
The app is consuming content from Contentful's API and in the service I'm manually adding a group identifier based on the name's first letter. An example data set might be:
[
{"id":"1","name":"Carrie","group":"C"},
{"id":"2","name":"Gabe","group":"G"},
{"id":"3","name":"Gerry","group":"G"},
{"id":"4","name":"Hector","group":"H"},
{"id":"5","name":"Hilbert","group":"H"}
]
Here's the template:
<ion-content>
<ion-list>
<div collection-repeat="person in People" group-header>
<ion-item class="item-icon-right" type="item-text-wrap" href="#/app/people/{{ person.id }}" group="{{ person.group }}">
<h2>{{ person.name }}</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</div>
</ion-list>
</ion-content>
Here's the directive:
.directive('groupHeader', function () {
return {
compile: function (element) {
element.prepend('<div class="item item-divider" is-divider>{{ person.group }}</div>');
}
}
})
And currently, as expected, the prepend occurs for each repeated item:
<div collection-repeat="name in Names" group-header>
<div class="item item-divider ng-binding">C</div>
<ion-item class="item-icon-right item item-complex" type="item-text-wrap" href="#/app/names/1" group="C">
<a class="item-content" ng-href="#/app/names/1" href="#/app/names/1">
<h2 class="ng-binding">Carrie</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
</ion-item>
</div>
<div collection-repeat="name in Names" group-header>
<div class="item item-divider ng-binding">G</div>
<ion-item class="item-icon-right item item-complex" type="item-text-wrap" href="#/app/names/2" group="G">
<a class="item-content" ng-href="#/app/names/2" href="#/app/names/2">
<h2 class="ng-binding">Gabe</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
</ion-item>
</div>
I'd like to know if there are any recommendations for updating the directive so that it only prepends on the first instance of name in a given group. I'm happy to be pointed to resources, rather than a longhand solution--but either will be much appreciated.
Thanks!
I was able to accomplish what I was after with an ng-switch in the template:
<ion-content>
<ion-list>
<div collection-repeat="person in People">
<ng-switch on="$first || person.group != People[$index-1].group">
<ion-item type="item-text-wrap" ng-switch-when="true">
{{ person.group }}
</ion-item>
</ng-switch>
<ion-item class="item-icon-right" type="item-text-wrap" href="#/app/people/{{ person.id }}" group="{{ person.group }}">
<h2>{{ person.name }}</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</div>
</ion-list>
</ion-content>
Thanks to: https://stackoverflow.com/a/14076254/3426040.
I just started with Angular and I got a code sample from codepen Accordion List
I'm trying to use my data in the html like this:
<div class="group">
<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(group)">
<div class="form-group">
<label></label>
<input>
</div>
</ion-item>
</div>
<div class="group">
<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(group)">
<div class="form-group">
<label></label>
<input>
</div>
</ion-item>
and the JS is set like this:
angular.module('my-app',['ionic'])
.controller('main', function($scope) {
$scope.groups = [{
name: "Basic Info",
items: [1,2,3]},
{
name: "Torso Measures",
items: [1,2,3]},
{
name: "Extra measures",
items: [1,2,3,4,5],
}
];
$scope.toggleGroup = function(group) {
if ($scope.isGroupShown(group)) {
$scope.shownGroup = null;
} else {
$scope.shownGroup = group;
}
};
$scope.isGroupShown = function(group) {
return $scope.shownGroup === group;
};
});
The problem is that whenever I click in 1 group, all of them expand / collapse. In JS / jQuery I'd pass an id but I think there is an "angular way" to do it. Could someone help me?
Demo without ng-repeat here.
Demo with ng-repeat here.
Why your code cant work:
Since you didn't use ng-repeat in your markup, group in these places
<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(group)">
are both undefined.
You need init the group variable for toggleGroup(group),isGroupShown(group) and should be different name if used twice in same scope.Update your html:
<div class="group" ng-init="groupid1=1">
<ion-item class="item-stable" ng-click="toggleGroup(groupid1)" ng-class="{active: isGroupShown(groupid1)}"></ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(groupid1)">
<div class="form-group">
<label></label>
<input>
</div>
</ion-item>
</div>
<div class="group" ng-init="groupid2=2">
<ion-item class="item-stable" ng-click="toggleGroup(groupid2)" ng-class="{active: isGroupShown(groupid2)}"></ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(groupid2)">
<div class="form-group">
<label></label>
<input>
</div>
</ion-item>
</div>
However,By using ng-repeat, you can use your html with wrapped like this:
<div class="group" ng-repeat="group in groups track by $index">
<ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"></ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown(group)">
<div class="form-group">
<label></label>
<input>
</div>
</ion-item>
</div>
It should works.
The fact that all your groups expand on click is probably because you have (in your snipet of code) two divs that uses the same group model.
I am talking about the group given in to your toggle function :
ng-click="toggleGroup(group)"
In the tutorial, the writter uses an ng-repeat directive to generate his divs
<div ng-repeat="group in groups">
this line goes in groups and take each item in groups member into a new group model. This could be why your accordions all expands,(and probably have the same content all of them). Could you give us a litle more co
If you want to use bootstrap accordion I can advise you to look at Angular-ui, an Angular module to replace bootstrap.js and make the same things in an Angular way (using directives, databinding....).
I have a view with one list item. After user clicked on this item, the modal form show. When user change value and close modal, the item-not not updating.
View:
<ion-view ng-controller="settingsController">
<ion-content>
<div class="list">
<ion-item class="item-icon-left" ng-click="openLanguageModal()">
<i class="icon ion-chatboxes"></i>
{{'Language'| translate}}
<span class="item-note">
<div ng-bind="choice"></div>
</span>
</ion-item>
</div>
</ion-content>
<script id="language-modal.html" type="text/ng-template">
<div class="modal">
<ion-header-bar>
<!-- <button class="button button-full button-dark" ng-click="closeLanguageModal()">{{'Done' | translate}}</button> -->
<button class="button button-clear button-positive pull-right" ng-click="closeLanguageModal()">
{{'Done' | translate}}
</button>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-radio ng-model="choice" ng-value="'en'"> English </ion-radio>
<ion-radio ng-model="choice" ng-value="'ru'"> Русский </ion-radio>
</ion-list>
</ion-content>
</div>
</script>
</ion-view>
Controller:
app.controller('settingsController', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('language-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.languageModal = modal;
})
$scope.choice = "en";
$scope.openLanguageModal = function() {
$scope.languageModal.show();
}
$scope.closeLanguageModal = function() {
$scope.languageModal.hide();
};
$scope.$on('$destroy', function() {
$scope.languageModal.remove();
});
});
I dont understand why the ng-bind didnt updates, help please
Try to use:
$scope.model.choice = "en";
in a main Controller (so that all other view controllers could inheritate this info).
and in all view (settings and language-modal) modify to:
ng-model="model.choice"
due to prototypal inheritance...
Here it is a working demo: http://codepen.io/beaver71/pen/XXaROB
i have a side-menu and i want to change the item of this side
eg: if user is connect ==> item my account is show
but if user is not connect ==>item my account is hide
in my controller:
facebookExample.controller("accueilController", function($scope, $cordovaOauth, $localStorage, $location,$ionicPopup,$state,$http) {
$scope.connect=true;
$localStorage.connect=true;
in the index.html :
<body ng-app="starter" ng-controller="accueilController" >
<ion-item class="item" nav-clear menu-close href="#/login" ng-show="connect=='true'">
<i class="fa fa-user" style="padding-right: 190px;"></i> <div style="padding-left: 25px;padding-top: 5px;">My account </div>
</ion-item>
i found nothing ,what can i do ,i use ng-if or ng-how and how ??
help me please
Try removing that check in the ng-show
<body ng-app="starter" ng-controller="accueilController" >
<ion-item class="item" nav-clear menu-close href="#/login" ng-show="connect">
<i class="fa fa-user" style="padding-right: 190px;"></i>
<div style="padding-left: 25px;padding-top: 5px;">My account</div>
</ion-item>
I used ng-click as below in ionic:
<div class="list">
<a class="item item-icon-right nav-clear" href="#/app/list1" ng-click="closeMenu()">
<i class="icon ion-ios7-paper"></i>
Item 1
</a> ....
</div>
know I want to use Meteor with Meteoric. I don't know how to convert ng-click to Blaze version. Please guide me.
I didn't find anything about this in Meteoric guide page.
Try to set up a template around your html:
<template name="myTemplate">
<div class="list">
<a id="myDiv" class="item item-icon-right nav-clear" href="#/app/list1">
<i class="icon ion-ios7-paper"></i>
Item 1
</a> ....
</div>
</template>
Then put this code into your js file:
Template.myTemplate.events({
"click #myDiv": function( event) {
// yourFunction
},
});