I'm using ionic framework to build a web app. So I have add some attributes and now I want to add functionality. You can see my code:
<div class="list card" ng-repeat="x in table">
<div class="item item-divider">Something</div>
<div class="item item-body">
<p>{{x.item1}} - {{x.item2}}</p>
<ion-checkbox>Add</ion-checkbox>
</div>
<div class="item item-divider">footer</div>
</div>
I would like to check some checkboxes to send x.item1 values to the controller or generally to a function for extended proccessing.
Thanks in advance,
John
You can have a ng-change in the ion-checkbox and call a controller function from it with the argument as x.item1. Something like this:
HTML:
<ion-checkbox ng-model="itemChecked" ng-change="callMe(x.item1)">Add</ion-checkbox>
Controller:
$scope.callMe = function(item) {
//do your stuff
}
Please note that I am not writing the complete controller syntax. If required just post a comment.
Please have a look at the angular docs. This one will get you started. There's also a good example of data binding...
Related
I have an array of messages
$scope.messsages = []
Upon clicking a button the content of a text area gets added into the array using ng-click method.This message is used to query the api. After which we get a response from the server which too is added into the array $scope.messages. All these messages are shown in html using ng-repeat i.e:-
<div ng-repeat="msg in messages track by $index">
{{ msg }}
</div>
However if I get a response from the server as a hyperlink string like
To know more click here.
The message that gets displayed in ng-repeat is a plain string with no hyperlinks. It renders the <a href="URL"> part as a string itself. I would like to represent it in html format.
One way it worked was by using
document.getElementById("demo").innerHTML = $scope.messages;
But I would like to know is there any angular way to do so in the ng-repeat part itself.
Thanks in advance
Include ngSanitize module on your app and then change your view as below
<div ng-repeat="msg in messages track by $index">
<div ng-bind-html="msg"></div>
</div>
Try to use like this
<div ng-repeat="msg in messages track by $index">
<div ng-bind-html="msg"></div>
</div>
Here is the plunk example for it.
You should use ng-bind-html for this. so you should inject ngSanitize in your app.
$scope.html = 'test';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);
angular.module('myapp', ['ngSanitize'])
.controller('main', function($scope,$sce) {
$scope.messages = [{"link":"<a href='#/abc'>abc</a>"}];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js"></script>
<div ng-app="myapp" ng-controller="main">
<div ng-repeat="msg in messages">
<div ng-bind-html="msg.link"></div>
</div>
</div>
I am working on angularjs project now.
I would like to create custom check box filter and pass data source and selected id list from controller.
The model in view should be updated While check box has been selected or unselected, but it does not work.
<div ng-controller="CheckboxCtrl as vm">
<div os-checkbox-filter data-source="vm.categoryList"
data-selected-checkbox-id-list="vm.selectedCategoryIdList">
</div>
<div>
--------------------------------
</div>
<div ng-repeat='p in vm.filteredPerson'>
{{p.name}} {{p.roleId}}
</div>
My Plunker for Demo
Thanks for any suggestion.
Prepare to facepalm yourself:
vm.filterByCategoryId < This doesn't exist. Change it to: filterByCategoryId
I am pretty new in ionic framework and angular JS. Currently I am working on developing a mobile app which will use mqtt protocol for data exchange. I have already written a cordova plugin for this mqtt service and also designed a very basic UI for that. What I intend to know from this forum is the preferred convention of calling a function which I have written in java script.
One of the views which I have defined in app.js is Home which contains the following few lines as part of its template.
<ion-content class="padding">
<div class="list card">
<div class="item item-divider">MAC Address</div>
<div class="item item-body">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="MAC Address" ng-model="??">
</label>
<a class="button button-small icon ion-bluetooth button-positive" ng-click="??" >
</a>
</div>
</div>
</div>
</ion-content>
I want to use the value from the text-field and pass that as an argument argument to the function "mqttPlugin.build(arg1)" which is defined under a JS file named mqttPlugin.js.
I know my question is very basic, but I would appreciate if someone helps me with this. I know that I would have to modify the controller for the view home to make room for such a change, but since I am not familiar with dependency injection, I would appreciate some help.
The best method is surely to transform your Javascript.js file into an angular Service.
Let's split the work to do :
Create a Service for your data Service
myApp.factory('dataFactory', function() {
var factory = {};
factory.getDatas = function(inputValue){
//your method to get datas
};
return factory;
});
Add all .js file into index.html to load them
Update your controller to inject your new service and call getdatas function
myApp.controller('dataInfoCtrl', function($scope, dataFactory) {
$scope.myModel = {};
//create your function
$scope.getDatas = function (value){
dataFactory.getDatas(value);
};
});
Update HTML : add ng-model to input
<label class="item-input-wrapper">
<input type="text" placeholder="MAC Address" ng-model="myModel.inputText">
</label>
Bind ng-click event yo your new function in your controller template
<a class="button button-small icon ion-bluetooth button-positive" ng-click="getDatas(myModel.inputText)" >
I have a collection of items, that I would like to stuff into a bootstrap grid. This then looks like this:
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
So I would need to loop through my collection and adding after every second item
There are two issues:
invalid html! No idea how to get around this
Issues with the module, but I think with some helpers I could get around.
Best would be if there were some examples.
Thanks for any inputs
check out this question. you should be searching for handlebars or spacebars to get better results. Blaze is the template engine; not the template system (if that makes sense.)
How do I populate a bootstrap grid system using handlebars for each command in Meteor.js?
Generically, you need to ensure that your collection is exposed to the template, most likely in a template helper. Then you can iterate the collection items like so:
{{#each templateHelperName}}
<div class="row">
<div class="col-md-8">{{propertyName1}}</div>
<div class="col-md-4">{{propertyName1}}</div>
</div>
{{/each}}
To create a template helper, take a look at the meteor docs; they're quite good.
If this doesn't help, perhaps you can provide some more clarity about what your collection looks like, and how you'd like it displayed. Your code doesn't really give much indication.
UPDATE: After some very insightful code from #Marc Kline, I went back and cleaned up my page. It turned out that I had my controllers listed in reversed (My angular controller was inside the Isotope controller, instead of the other way round). Once I changed it back and cleaned off some additional scripting, it started working again. I have updated the code snippet to reflect the change. Thanks to Marc and S.O!
I am having trouble figuring out how can I add new items using Angular and still let Isotope manage their UI display.
I am using Isotope and Angular to render server results in a masonry style layout. When I add new items to the layout on a button click, angular adds it just fine. However, they do not appear in the context of the isotope UI and appear separately (and cannot be sorted, laid out or filtered using Isotope).
Here is my JS Code
<!-- Define controller -->
var contrl = app.controller("MainController", function($scope){
$scope.items ={!lstXYZ}; //JSON data from server
//Function called by button click
$scope.addItem = function(item)
{
$scope.items.push(item);
$scope.item = {};
}
});
contrl.$inject = ['$scope'];
Here is the HTML to display the server results...(Updated to show working code..refer comments)
<div ng-controller="MainController">
<div class="isotope" id="isotopeContainer">
<div ng-repeat="item in items">
<div class='element-item {{item.status}}' data-category='{{item.status}}'>
<p class="number">{{item.type}}</p>
</div>
</div>
</div>
</div>
And here is my HTML button to add the new items
<table>
<tr>
<td><input type="text" ng-model="item.status" /></td>
</tr>
<tr>
<td><input type="text" ng-model="item.type" /></td>
</tr>
<tr>
<td colspan="2"><input type="Button" value="Add" ng-click="addItem(item)" /> </td>
</tr>
</table>
I am not sure how do I ensure that Isotope can recognize the newly added element and re-animate the layout.
Any help or pointers will be very appreciated. Thanks!
ng-repeat takes care of adding the new element to the DOM for you. However, Isotope isn't doing any "watching" for you - you have to manually invoke a redraw of the container.
You could just add something like $("#isotopeContainer").isotope(...) directly to your controller, but in the spirit of keeping your controllers lean and free of DOM-related code, you should instead create a service. Something like:
myApp.service('Isotope', function(){
this.init = function(container) {
$(container).isotope({itemSelector: '.element-item'});
};
this.append = function(container, elem) {
$(container).isotope('appended', elem);
}
});
... where the first method initializes a new Isotope container and the next redraws the container after an item is appended.
You could then inject this service into any controller or directive, but directives probably are best for this scenario. In this Plunker, I created two new directives: one for Isotope containers and another for Isotype elements, and used the service to do the initialization and redrawing.
In this particular case, my code was not written correctly. I have updated the question's code but wanted to mention it more clearly here...
Apparently, the beauty of Angular is that you do not need to bother with the underlying UI framework (Isotope in this case). As long as you update the Angular data array, the UI binding is updated automatically.
The only gotcha is to ensure that the UI framework div is within the context of your Angular div.
Here is the non-working code...Note that the isotope div is outside the Angular controller.
<div class="isotope" id="isotopeContainer">
<div ng-controller="MainController">
<div ng-repeat="item in items">
<div class='element-item {{item.status}}' data-category='{{item.status}}'>
<p class="number">{{item.type}}</p>
</div>
</div>
</div>
</div>
Here is the updated code with isotope running within the Angular controller context...
<div ng-controller="MainController">
<div class="isotope" id="isotopeContainer">
<div ng-repeat="item in items">
<div class='element-item {{item.status}}' data-category='{{item.status}}'>
<p class="number">{{item.type}}</p>
</div>
</div>
</div>
</div>
Hope this helps. I am thankful for all the responses and help I got from SO. Appreciate the learning opportunity.