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
Related
This is the code:
<div ng-repeat="data in products">
<div class=edit ng-click="dataUI.showEdit = true; content = data;">
</div>
<div ng-repeat="renew in data.renewed">
<div class=edit ng-click="dataUI.showEdit = true; content = renew;">
</div>
</div>
</div>
<div class="modal" ng-show="dataUI.showEdit">
<div class="product_price">{{content.product_price}}</div>
</div>
When I click this, the popup opens but, the content is not filled with items. In the popup, I am using content to show the data.
What am I doing wrong here?
JSFiddle: http://jsfiddle.net/HB7LU/22082/
Here's your fiddle fixed: http://jsfiddle.net/masa671/xtaa9gev/
You were using an old version of Angular, changed to version 1.4.8 (see the JavaScript Gear).
Then, a couple of missing injections:
MyCtrl.$inject = ['$scope'];
myApp.controller('MyCtrl', MyCtrl);
Finally, assignment to content in ng-click did not work, because ng-repeat creates a new scope ("Always use a dot"). I fixed this with dataUI.content. Here is one good explanation: Ng-click doesn't work inside ng-repeat.
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...
I am building my first AngularJS app comming from backbone. I have a list where the user can select an item. The goal is show the details of the selected item in a view below the list. The list-view and detail-view are both part of the main-view.
my list view
<div id="rfc-records" class="container-fluid">
<div ng-repeat="record in records" ng-click="selectRow()" class="row select table-row">
<div class="col-lg-1 center">
{{record.id}}
</div>
<div class="col-lg-1 center">
{{record.rfcObject}}
</div>
<div class="col-lg-5">
{{record.rfcFunction}}
</div>
<div class="col-lg-2">
{{record.status}}
</div>
<div class="col-lg-3">
{{mii.utils.date.extToIntDate(record.firstProcessing)}}
</div>
</div>
</div>
As you see I already added an event to each row: ng-click="selectRow()".
It is unclear to me how to know the selected row in this function. I could do something like this :
ng-click="selectRow(record)
MainController
$scope.selectRow = function(record){
alert(record.id); // undefined
}
The result is undefined so this does not work. Plus this seems like a bad approach to pass the model back from the view to the controller. I might be able to get the application working but I have the feeling that I won't be using the paradigm as intended.
In backbone I would have a seperate view for each row where the model is bound to. But in Angular models aren't as explicit as in backbone.
In general I don't really understand how models work in Angular. R
Regarding this example I have the following questions:
How do I know what item is selected in the list
Where should I put the selectRow function? In the controller of the Mainview or in the list-view directive?
How do I pass the selected model to the details-view.
Well, passing current item into ngClick handler is pretty usual way to solve this task. I'm not sure why it's not working for you, it should. Here is the example of this typical approach.
In backbone I would have a seperate view for each row where the model is bound to. But in Angular models aren't as explicit as in backbone.
Actually Angular is even more elegant in this concern. You still have model available in every iterated row. You can refer current child scope as this in controller. So in your case if you don't want to pass record object into controller function on click, you can use this and it will point to the current scope object (remember that ngRepeat creates new child scope for every row):
$scope.selectRow = function() {
alert(this.record.id);
};
and you don't have to pass anything in HTML:
ng-click="selectRow()"
Demo: http://plnkr.co/edit/kN0vB6N6v7XnqASRSmAd?p=preview
ng-click and ng-repeat are in same div. You can add a new div in this repeated div like and this is works for me :
<div id="rfc-records" class="container-fluid">
<div ng-repeat="record in records" class="row select table-row">
<div class="col-lg-1 center">
Select This item<input type=button ng-click="selectRow(record)">
</div>
<div class="col-lg-1 center">
{{record.id}}
</div>
<div class="col-lg-1 center">
{{record.rfcObject}}
</div>
<div class="col-lg-5">
{{record.rfcFunction}}
</div>
<div class="col-lg-2">
{{record.status}}
</div>
<div class="col-lg-3">
{{mii.utils.date.extToIntDate(record.firstProcessing)}}
</div>
</div>
</div>
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.
I am trying to populate data into the html page using Angular framework.
I want to add data to existing accordion element
<div ng-controller="Ctrl">
<accordion id='accordion' close-others="false">
<accordion-group is-open="false">
<accordion-heading >
<h2>{{heading}}</h2>
</accordion-heading>
<div>
<div>
{{data}}
</div>
</div>
</accordion-group>
</accordion>
<accordion>
....more
</accordion>
multiple accordions here...
</div>
I am not sure how to add more accordion dynamically. Can anyone help me about it? Thanks a lot!
There is a lot of trick you can do, like using ng-show or ng-hide for example, and have all the accordion all ready write on the page, or a ng-repaet with various accordion inside, but take care of the space in the page.
If i Have understand your problem you can set a variable in that way var data={value:'something',show:'true'} and bind the ng-show parameter to the data show, at least you can do an array of data with the show value, there is an infinite type of solution.
With a plunker or a fiddle it could be easier to help, but i hope my answer could help you anyway.