Angular 1 app.
Basically, there is an array of JSON object like this:
ctrl.messages =
[
{id: 1, text: 'hello1',createdBy:{name: 'Jack', hasBeenRead: false} }
,{id: 2, text: 'hello2',createdBy:{name: 'Steven', hasBeenRead: true} }
];
Now, in the view I print the messages like this:
<div ng-repeat="message in messages">
Message: {{message.text}}
</div>
Somewhere else I have this html:
<div ng-if="messages.length > 0">
<button ng-if="?">Mark all read</button>
<button ng-if="?">Mark all unread</button>
</div>
The buttons above will never be showing together. But only one of them (and only if there are messages at all).
I wonder if it possibile to add in the ng-if above (in the button) a code for understanding if the button has to be showing.
The button Mark all read will be showing only if there is at least one message marked with hasBeenRead: false.
The button Mark all unread will be showing only if all the messages have been read.
I could do this in the controller. But I thought it would be neater if I could add this directly in the view.
The difficulty for me is to access the hasBeenRead in the JSON from the view without iterating. Just asking "is there at least one unread message?".
Is there a way to do it in this way?
Create filter as below
app.filter('hasBeenRead', function () {
return function (input) {
return input.some(val => !val.createdBy.hasBeenRead);
}
});
<div ng-if="messages.length > 0">
<button ng-if="!messages|hasBeenRead">Mark all read</button>
<button ng-if="messages|hasBeenRead">Mark all unread</button>
</div>
Related
I've done a ton of reading and research on this topic the past few days and have found some good answers, but for some of the answers I question performance and necessity.
My question pertains to nested ng-repeat scopes. I'm wondering what the best way to achieve an "add item" scenario for adding an item to the nested foreach.
My Code
My HTML is simply 2 ng-repeats and my goal is to be able to add an item to the second (nested) ng-repeat
<div ng-app="myApp">
<div class="nav" ng-controller="FoodsController as vm">
<div class="level1" ng-repeat="foods in vm.foodGroups">{{foods.Name}}
<button type="button" ng-click="vm.addNewFood()">add new food</button>
<div ng-show="vm.newFoodBeingAdded">
<input type="text">
</div>
<div class="level2" ng-repeat="food in foods.FoodsInGroup">{{food.Name}}</div>
</div>
</div>
</div>
My Angular controller looks like this:
app.controller('FoodsController', function () {
var vm = this;
vm.foodGroups = [{
"Name": "Grains",
"FoodsInGroup": [{
"Name": "Wheat"
}, {
"Name": "Oats"
}]
}, {
"Name": "Fruits",
"FoodsInGroup": [{
"Name": "Apple"
}, {
"Name": "Orange"
}]
}];
vm.newFoodBeingAdded = false;
vm.addNewFood = function () {
vm.newFoodBeingAdded = true;
};
});
What should happen
The general work flow would be a user clicks an Add New button and it shows a text box with a "save" button. The text box & button would be within the parent foreach. Once a user saves the item it would then be added to the nested foreach (that logic isn't shown).
The issue
The issue is that when I click "Add New Food" (which should just show 1 of the text boxes & save buttons), all of the text boxes show. How do I ensure I am "scoping" this correctly and that only the text box/button within that parent are shown?
Possible solution
One answer I found was to create a child controller for each nested item. For example I'd have a FoodGroupsController which would manage all the logic for the nested foreach (because there will be a lot more going on than just adding a new item in a real app, so it could be justified).
jsFiddle
Here's a jsFiddle with the code that currently does not function correctly.
There is the forked Fiddle
I made just few changes. The fact is that you were binding the ng-show with a single var in your controller. It was a show me all or show me nothing possibility.
So the fix it, you have to bind this, in your food item, not in the controller himself.
Html :
<button type="button" ng-click="vm.addNewFood(foods)">add new food</button>
<div ng-show="foods.newFoodBeingAdded" class="add-new-food">
<input type="text" placeholer="add a new food">
<button type="button">save new food</button>
</div>
Controller :
vm.addNewFood = function (foods) {
foods.newFoodBeingAdded = true;
};
With this code, you pass the food in param of your function, so you can change the boolean of your food only. And then, your ng-show is just binding on this boolean.
I have a list of checkboxes for people, and I need to trigger an event that will display information about each person selected in another area of the view. I am getting the event to run in my controller and updating the array of staff information. However, the view is not updated with this information. I think this is probably some kind of scope issue, but cannot find anything that works. I have tried adding a $watch, my code seems to think that is already running. I have also tried adding a directive, but nothing in there seems to make this work any better. I am very, very new to Angular and do not know where to look for help on this.
My view includes the following:
<div data-ng-controller="staffController as staffCtrl" id="providerList" class="scrollDiv">
<fieldset>
<p data-ng-repeat="person in staffCtrl.persons">
<input type="checkbox" name="selectedPersons" value="{{ physician.StaffNumber }}" data-ng-model="person.isSelected"
data-ng-checked="isSelected(person.StaffNumber)" data-ng-change="staffCtrl.toggleSelection(person.StaffNumber)" />
{{ person.LastName }}, {{ person.FirstName }}<br />
</p>
</fieldset>
</div>
<div data-ng-controller="staffController as staffCtrl">
# of items: <span data-ng-bind="staffCtrl.infoList.length"></span>
<ul>
<li data-ng-repeat="info in staffCtrl.infoList">
<span data-ng-bind="info.staffInfoItem1"></span>
</li>
</ul>
</div>
My controller includes the following:
function getStaffInfo(staffId, date) {
staffService.getStaffInfoById(staffId)
.then(success)
.catch(failed);
function success(data) {
if (!self.infoList.length > 0) {
self.infoList = [];
}
var staffItems = { staffId: staffNumber, info: data };
self.infoList.push(staffItems);
}
function failed(err) {
self.errorMessage = err;
}
}
self.toggleSelection = function toggleSelection(staffId) {
var idx = self.selectedStaff.indexOf(staffId);
// is currently selected
if (idx >= 0) {
self.selectedStaff.splice(idx, 1);
removeInfoForStaff(staffId);
} else {
self.selectedStaff.push(staffId);
getStaffInfo(staffId);
}
};
Thanks in advance!!
In the code you posted, there are two main problems. One in the template, and one in the controller logic.
Your template is the following :
<div data-ng-controller="staffController as staffCtrl" id="providerList" class="scrollDiv">
<!-- ngRepeat where you select the persons -->
</div>
<div data-ng-controller="staffController as staffCtrl">
<!-- ngRepeat where you show persons info -->
</div>
Here, you declared twice the controller, therefore, you have two instances of it. When you select the persons, you are storing the info in the data structures of the first instance. But the part of the view that displays the infos is working with other instances of the data structures, that are undefined or empty. The controller should be declared on a parent element of the two divs.
The second mistake is the following :
if (!self.infoList.length > 0) {
self.infoList = [];
}
You probably meant :
if (!self.infoList) {
self.infoList = [];
}
which could be rewrited as :
self.infoList = self.infoList || [];
I'm just playing around with different patterns and am very new to programming, however I've got everything to work in my test app so far except this. I've tried a bunch of variations with no luck, but I suspect I'm missing something really simple.
Basically what I want to happen is for a user to click a button and for it to then update the value of two specific attributes of the current object.
In this example I'm wanting the update to occur when the user clicks the "Return" button (the other buttons shown below are working fine).
Here's the HTML template for the button in question:
<template name="bookDetails">
<div class="post">
<div class="post-content">
<h3>{{title}}</h3><span> {{author}}</span>
{{#if onLoan}}
<i class="fa fa-star"></i>
On loan to: {{lender}}{{/if}}
</div>
{{#if ownBook}}
Edit
Lend
<div class="control-group">
<div class="controls">
<a class="discuss btn return" href="">Return </a>
</div>
</div>
{{/if}}
</div>
</template>
Here's the .js file which contains my Template event. Basically I want to set the values for the "lendstatus" and "lender" attributes.
Template.bookDetails.helpers({
ownBook: function() {
return this.userId == Meteor.userId();
},
onLoan: function() {
return this.lendstatus == 'true';
}
});
Template.bookLoan.events({
'click .return': function(e) {
e.preventDefault();
var currentBookId = this._id;
var bookProperties = {
lendstatus: "false",
lender: "",
}
Books.update(currentBookId, {$set: bookProperties}, function(error) {
if (error) {
// display the error to the user
throwError(error.reason);
} else {
Router.go('bookPage', {_id: currentBookId});
}
});
},
});
If I type the following into the Browser console while on the page for the object with id ZLDvXZ9esfp8yEmJu I get the correct behaviour on screen and the database updates so I know I'm close:
Books.update({ _id: "ZLDvXZ9esfp8yEmJu"}, {$set: {lendstatus: "false", lender: ""}});
What am I missing?
OK - so my problem was that I'd defined the event handler in the wrong template. I'd defined it in the bookLoan template instead of the bookDetails template. Thanks #saimeunt for pointing this out!
So in my mobile web app (using PhoneJS), I am using a dxList to display some records. I have a checkbox next to each list 'item', so that I can mass delete or send the records. I need to know how to figure out if there is one or more checkboxes checked.
I know I can do this with normal Knockout, but I don't the PhoneJS framework actually creates a 'real' HTML checkbox, but makes a clickable element that functions like a checkbox.
So if one or more checkboxes are checked, I need to show a send and delete button. I just need to know how to determine if there are any checked boxes.
I've looked everywhere online for this, but the solutions are for Knockout using REAL checkbox inputs...
Here's my code for the dxList:
<div data-bind="dxList:{dataSource: list_data, grouped:true }">
<div data-options="dxTemplate:{name:'group'}">
<b><span data-bind="text: $data.key"></span></b>
</div>
<div data-options="dxTemplate:{name:'item'}">
<span data-bind="text: $data.item_value"></span>
<div data-bind="dxCheckBox: { }" style="float:right"></div>
</div>
</div>
I've tried binding 'checked' to an observable array, but that affects all the checkboxes.
Can anyone help me with this? Thanks!
The most straightforward MVVM approach is to data-bind dxCheckBox.checked option to a boolean property of a list item view-model. Then you can iterate over the items and understand which are checked.
You mentioned that you
tried binding 'checked' to an observable array
It is not clear why you bind a scalar property to an array.
Actually it does not differ much from the pure HTML approach. You may treat PhoneJS widgets just as fat HTML tags.
So, I have pretty much the same question, but I think I can be more clear on my requirements.
I have a dxList that uses a SQLite table as a datasource. It is setup to allow the user to select from a list of templates to apply to another object. This new list of templates and the associated object ID will be saveed in a DIFFERENT table than the original data and as such, I need to be able to identify the items in the list that have been checked.
<div data-bind="dxList: { dataSource: templateList }">
<div data-bind="dxAction: ''" data-options="dxTemplate : { name: 'item' } ">
<table>
<tr>
<td>
<div data-bind="dxCheckBox: { }"></div>
</td>
<td>
<div style="font-weight: bold; padding-left: 10px;" data-bind="text: TemplateName"></div>
</td>
</tr>
</table>
</div>
</div>
I found this post during my initial search. I can't use the data-bind: {checked: ?} value of each check box, as that would do as the original poster found, setting all or none. I thought about an array. I'm going to try to use the dxAction to add/remove checked list item IDs from an array but I'm not sure how well that will work. Then there's the final parse to get all checked items. I will update this post once I get it working.
Resolution:
ViewModel objects:
selectedTemplates: ko.observableArray(),
selectTemplate: function (args) {
//If it's there. Remove it.
if (args.model.selectedTemplates.indexOf(args.itemData.TemplateID) > -1) {
args.model.selectedTemplates.pop(args.itemData.TemplateID);
args.itemElement[0].style.backgroundColor = '';
args.itemElement[0].style.color = 'Black';
}
//else Add
else {
args.model.selectedTemplates.push(args.itemData.TemplateID);
args.itemElement[0].style.backgroundColor = '#017AFF';
args.itemElement[0].style.color = 'White';
}
},
And the View:
<div data-options="dxView : { name: 'SelectSurveys', title: 'SelectSurveys' } ">
<div data-bind="dxCommand: { title: 'Save', id: 'create', action: saveSelections, icon: 'save' }"></div>
<div data-options="dxContent : { targetPlaceholder: 'content' } ">
<div data-bind="dxList: { dataSource: templateList, itemClickAction: selectTemplate }">
<div data-options="dxTemplate : { name: 'item' } ">
<div style="font-weight: bold; padding-left: 10px;" data-bind="text: SurveyName"></div>
</div>
</div>
</div>
</div>
And looping the selected values for saving to local DB:
$.each(args.model.selectedTemplates(), function (index, value) {
db.transaction(function (tx) {
console.log("Inserting Data");
tx.executeSql(sql, [value],
function (t, result1) {
if (result1 != null) {
console.log("New Item added." + result1.insertId);
}
},
function (t, error) {
console.log(error);
});
});
In the objects, I've added some coloring so you can tell which ones are selected, it doesn't use the dxSwitch or Checkbox, but it works just as well and I think it's more visually appealing as well as informative to the user.
I have two different div tags in my html code referencing the same controller in AngularJS. What I suspect is that since these divs aren't nested they each have their own instance of the controller, thus the data is different in both.
<div ng-controller="AlertCtrl">
<ul>
<li ng-repeat="alert in alerts">
<div class="span4">{{alert.msg}}</div>
</li>
</ul>
</div>
<div ng-controller="AlertCtrl">
<form ng-submit="addAlert()">
<button type="submit" class="btn">Add Alert</button>
</form>
</div>
I know this could easily be fixed by including the button in the first div but I feel this is a really clean and simple example to convey what I am trying to achieve. If we were to push the button and add another object to our alerts array the change will not be reflected in the first div.
function AlertCtrl($scope) {
$scope.alerts = [{
type: 'error',
msg: 'Oh snap! Change a few things up and try submitting again.'
}, {
type: 'success',
msg: 'Well done! You successfully read this important alert message.'
}];
$scope.addAlert = function() {
$scope.alerts.push({
type: 'sucess',
msg: "Another alert!"
});
};
}
This is a very common question. Seems that the best way is to create a service/value and share between then.
mod.service('yourService', function() {
this.sharedInfo= 'default value';
});
function AlertCtrl($scope, yourService) {
$scope.changeSomething = function() {
yourService.sharedInfo = 'another value from one of the controllers';
}
$scope.getValue = function() {
return yourService.sharedInfo;
}
}
<div ng-controller="AlertCtrl">{{getValue()}}</div>
<div ng-controller="AlertCtrl">{{getValue()}}</div>
If I understand the question correctly, you want to sync two html areas with the same controller, keeping data synced.
since these divs aren't nested they each have their own instance of the controller, thus the data is different in both
This isn't true, if you declare the controllers with the same alias (I'm using more recente angular version):
<div ng-controller="AlertCtrl as instance">
{{instance.someVar}}
</div>
<div ng-controller="AlertCtrl as instance">
{{instance.someVar}} (this will be the same as above)
</div>
However, if you WANT them to be different and comunicate each other, you will have to declare different aliases:
<div ng-controller="AlertCtrl as instance1">
{{instance1.someVar}}
</div>
<div ng-controller="AlertCtrl as instance2">
{{instance2.someVar}} (this will not necessarily be the same as above)
</div>
Then you can use services or broadcasts to comunicate between them (the second should be avoided, tough).