reading on ng-checked attribute I realize we can use angular expressions to determine wether a checkbox is checked or not.
I have images and dates. I want to make a table representing which image is active at a specific date. this sql fiddle should help you understand what I mean.
In the fiddle, the four checkboxes are checked, but one of them (the one corresponding to the first image and the 'feb' date) should not be checked, since 'feb' is not in the dates of the first image (see the $scope definition below)
My problem is that the expression date = image.dates in the ng-checked attribute always return true, hence the four checked checkboxes.
What expression could I use to verify that a specific date is in the image's defined dates?
I can change the data model, so if it would be easier to have the dates of a specific image as an array rather than a string please go ahead.
view
<div ng-controller="MyCtrl">
<table>
<tr>
<td style="width:80px;"></td>
<td style="width:35px;" ng-repeat="date in dates">{{date}}</td>
</tr>
<tr ng-repeat="image in images">
<td>{{image.name}}</td>
<td ng-repeat="date in dates">
<input ng-checked="date = image.dates" type="checkbox" />
</td>
</tr>
</table>
</div>
app
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.images = [
{name:'Image 1',dates:'jan'},
{name:'Image 2',dates:'jan,feb'}
];
$scope.dates = [
"jan",
"feb"
];
}
You will have to check if the dates contains the date expression.
Something like this:
<tr ng-repeat="image in images">
<td>{{image.name}}</td>
<td ng-repeat="date in dates">
<input ng-checked="image.dates.indexOf(date) > -1" type="checkbox" />
</td>
</tr>
Related
I have an angularJS project where I requested data from the server and the returned JSON object with a list of countries name like this :
$scope.countries=[{
countriesName : 'USA, England, Germany, France'
}];
so when I bind the data to render it in view I use ng-repeat like this :
<tbody>
<tr ng-repeat="country in countries">
<td>{{country.countriesName }}</td>
</tr>
</tbody>
the current view :
Countries Name :
-----------------
USA, England, Germany,France
but I want in the view to split this names by special character which in this case `(,) and then write the next name in new line at the same
so the expected view something like this :
Countries Name :
-----------------
USA,
England,
Germany,
France
Note:
-That binding the countries name returns in one string line and I bind this names in in a table at once time
-I want one <td> with 4 different lines
You may generate different divs after splitting the countriesName by a space. Since divs have block display, the contents will automatically take up new lines.
I prefer this approach to not deal with sanitizing the generate HTML content (by using <br> tags), as it will require including ngSanitize module.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.countries = [{
countriesName: 'USA, England, Germany, France'
}];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table>
<tbody>
<tr>
<td ng-repeat="country in countries">
<div ng-repeat="line in country.countriesName.split(' ')">
{{line}}
</div>
</td>
</tr>
</tbody>
</table>
</div>
Try this please:
<tbody>
<tr ng-repeat="country in countries">
<td ng-repeat="name in country.countriesName.split(',')">
{{ name }}
</td>
</tr>
</tbody>
I have created a Plunker with my code showing the issue here:
As you can see when you click on the e.g. 'de' checkbox it toggles show/hide of the table headings - but not the <textarea> values under the column heading, corresponding to the locale ('de' in this case), which is what I am currently trying to get working.
I cant think of a way to link the <textarea> depending on locale.Selected value of the checkbox. So when locale.Locale == res.LocaleID I want to show/hide depending on the locale.Selected value.
<table class="table">
<tr>
<th>Resource Id</th>
<th ng-repeat="locale in view.resourceGridResources.Locales" ng-show="locale.Selected">
{{locale.Locale ? locale.Locale : "invariant" }}
</th>
</tr>
<tr ng-repeat="resource in view.resourceGridResources.Resources">
<td>{{resource.ResourceId}}</td>
<td ng-repeat="res in resource.Resources">
<textarea ng-model="res.Value"
ng-blur="view.saveGridResource(res)"
style="min-width: 300px"
//trying to get to locale.Selected here - how get index 'x'?
ng-show="view.resourceGridResources.Locales[x].Selected">
</textarea>
</td>
</tr>
</table>
Trying to implment something like here - whereby user can click on the check box and it will toggle hide/show table column.
Please note: my demo plunker is just example of issue in my much larger project so I have no control over changing the json format etc.
You don't have to write any function in JS. Since the number of items in resource.Resources is same as the number of items in view.resourceGridResources.Locales.
HTML
<td ng-repeat="res in resource.Resources" ng-show="vm.resourceGridResources.Locales[$index].Selected">
<textarea ng-model="res.Value"
style="min-width: 300px"></textarea>
</td>
Working Plunker: http://plnkr.co/edit/Al4KdHlCV2uo9HQ2qNt7?p=preview
Add this method to your controller:
vm.check = function(res) {
return vm.resourceGridResources.Locales.find(function(loc) {
return loc.Locale === res.LocaleId && loc.Selected;
});
};
Add this condition to your view:
<td ng-repeat="res in resource.Resources" ng-show="vm.check(res)">
A working demo: http://plnkr.co/edit/neQtu8qxQQVP2kDIY5ru?p=preview.
I use a ngRepeat with a checkbox and need when I check each item compute the value total of selected items as below:
HTML:
<tr ng-repeat="ciclo in ciclos">
<td><input id="idCiclo" type="checkbox" ng-click="computeTotal(ciclo)">
</td>
<td>{{ciclo.Quantity}}</td>
<td>{{ciclo.Value | currency}}</td>
...
<tfoot>
<tr>
...
<td>{{TotalQuantity}}</td>...
Controller:
$scope.computeTotal = function (ciclo) {
$scope.TotalQuantity += ciclo.Quantity; //Here I need Add or Subtract a value
};
You should have a property that indicates whether a checkbox has been checked or unchecked so that you can decide to add or subtract.
You would be using ngModel with ngChange (ngClick is usually better for elements that don't have built-in click expectations/behaviors).
Example:
View:
<tr ng-repeat="ciclo in ciclos">
<td>
<input class="ciclo" type="checkbox" ng-model="ciclo.checked" ng-change="computeTotal(ciclo)">
<!-- Note that I took out the ID. IDs should never be used in ngRepeat,
as it heavily risks multiple elements having the same ID,
which should ALWAYS be unique.
A class works much better for collections like this. -->
</td>
<td>{{ciclo.Quantity}}</td>
<td>{{ciclo.Value | currency}}</td>
</tr>
Controller:
$scope.computeTotal = function (ciclo) {
if(ciclo.checked)
$scope.TotalQuantity += ciclo.Quantity;
else
$scope.TotalQuantity -= ciclo.Quantity;
};
I have a table with 6 rows and 4 columns (the fourth one is a Total: which should be a sum of the above 3 columns). Basically what I want to do is calculate the sum of each column and show the total number in the fourth column. My table is generated using ng-repeat.
Something like:
<table>
<thead>
<tr>
<th ng-repeat="item in items">{{item}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>Input1:</td>
<td ng-repeat="collection in collections">
<input type="text" ng-model="collection.row1">
</td>
</tr>
<tr>
<td>Input2:</td>
<td ng-repeat="collection in collections">
<input type="text" ng-model="collection.row2">
</td>
</tr>
<tr>
<td>Input3:</td>
<td ng-repeat="collection in collections">
<input type="text" ng-model="collection.row3">
</td>
</tr>
<tr>
<td>Sum:</td>
<td ng-repeat="collection in collections" ng-model="collection.total">
{{collection.total}}
</td>
</tr>
</tbody>
</table>
"collections" from ng-repeat would be an array with 6 objects which I'm getting from an API using a GET method and storing my data in a $scope.
"Total" row with ng-model is coming from backend with the calculus already done but I need a way to show it on client as it is updating dynamically.
I've tried $watch and $watchCollection and also ng-change but I can't find a way to make it work. In my controller I used a for to go through my array of objects and tried to sum every [i] position but that didn't work.
Is there another solution for my issue?
Here is what I tried in my controller:
$scope.collections = [];
$scope.getTotal = function(){
var total = 0;
for(var i = 0; i < $scope.collections[i].length; i++){
var myItems= $scope.collections[i];
total = (myItems.row1+ myItems.row2+ myItems.row3);
}
return total;
};
Thank you.
Why not simply do it in the template?
<td>{{collection.row1 + collection.row2 + collection.row3}}</td>
Also, there should not be an ng-model unless it is an <input>. That's probably where your main error is. Ng-model will try to set the value inside the <td>'s, and so the angular template ({{X}}) and ng-model are competing for the display value inside the <td></td> in your code given
If you calculate the total in the back-end
$scope.CalculatedTotal = Some Value;
so you can call in the last row:
<td>Sum:</td>
<td ng-repeat="collection in collections" ng-model="collection.total">
{{CalculatedTotal}}
</td>
or store the CalculatedTotal in to the object
currentCollection.Total = CalculatedTotal;
something like that
I am trying to toggle a delete button which has already a function bound to it. The list is created with ng-repeat checking the users object. But the methds I have seen so far are either simple model show which does not work in my case. Or complex directive controller methods.
All I need is to check whether at least one checkbox is checked. Here is the snippet from the code:
<table class="table">
<tr ng-repeat="user in ctrl.commonUserService.users | filter:ctrl.commonUserService.suppressLoggedOnUserFilter()">
<td><input type="checkbox" ng-model="user.selected" value="y" /></td>
<td title="User Name"><strong>{{user.userName}}</strong></td>
How can I easily do this with Angular? I tried to create a function looping users and looking if they are selected at all but don't think I can put this function to ng-show.
You'll have to check if at least one box is selected when the state changes:
<td><input type="checkbox" ng-model="user.selected" ng-change="ctrl.userSelected()" value="y" /></td> <!-- use ng-change to notify when a checkbox is clicked -->
<button ng-click="ctrl.delete()" ng-show="ctrl.usersSelected">Delete</button> <!-- if ctrl.usersSelected is true show delete -->
In the controller:
this.userSelected = function userSelected() { // when checkbox is clicked check users to see if at least one is selected and save the state in this.userSelected
this.usersSelected = this.commonUserService.users.some(function(user) {
return user.selected;
});
};
You can do this fairly easily using the ng-change directive on your inputs. See this plunkr for the working example, but it basically goes like this:
View:
<table class="table">
<tr ng-repeat="user in users">
<td><input type="checkbox" ng-change="isSelected()" ng-model="user.selected" /></td>
<td title="User Name"><strong>{{user.userName}}</strong></td>
</tr>
</table>
<button class="delete" ng-show="showDelete">Delete</button>
Controller:
$scope.isSelected = function() {
var somethingSelected = false;
$scope.users.forEach(function(user, index) {
if (user.selected) somethingSelected = true;
});
$scope.showDelete = somethingSelected;
};