I'm using ng-repeat to populate user objects from Firebase, in addition to using the ngDialog library. My goal is that when you click on, say a 'view' button, a small dialog would pop-up where you can view a user's details. However, I'm trying to follow the documentation for ngDialog and my popup template isn't rendering any of the expressions.
Data model:
{
"members": {
"-JWT5y43YFy1mGirVVS2": {
"date": 1410328158691,
"firstname": "Michael",
"image": "http://telehealth.org/wp-content/images/user-placeholder.jpg",
"upcoming": "PTO on Thursday",
"status": {
"color": "red",
"contact": {
"email": "test#email.com",
"yahoo": "yahooIM"
},
"projects": {
"projectone": "project one",
"projecttwo": "project two",
"projectthree": "project three",
"projectfour": "project four",
"projectfive": "project five",
"projectsix": "project six",
"projectseven": "project seven",
"projecteight": "project eight",
"projectnine": "project nine",
"projectten": "project ten"
}
}
},
"-JWT65QvjwD4TSFjDx4V": {
"date": 1410328192928,
"firstname": "Magic",
"image": "http://telehealth.org/wp-content/images/user-placeholder.jpg",
"upcoming": "PTO on Thursday",
"status": {
"color": "yellow",
"contact": {
"email": "test#email.com",
"yahoo": "yahooIM"
},
"projects": {
"projectone": "project one",
"projecttwo": "project two",
"projectthree": "project three",
"projectfour": "project four",
"projectfive": "project five",
"projectsix": "project six",
"projectseven": "project seven",
"projecteight": "project eight",
"projectnine": "project nine",
"projectten": "project ten"
}
}
}
HTML:
<ul class="cbp-rfgrid" ng-repeat="member in members">
<li class="{{member.status.color}}">
<div class="dripicon profilephoto"></div>
<div>
<h3>{{member.firstname}}</h3>
<div class="dripicon actions"
ng-click="viewStatus()"></div>
<div class="dripicon actions"
ng-click="editStatus()"></div>
</div>
</li>
</ul>
Controller:
myApp.controller('MembersController', function($scope, $firebase, $location, ngDialog){
var ref = new Firebase('https://scrumcheck.firebaseio.com/members');
var members = $firebase(ref);
$scope.members = members.$asObject();
$scope.viewStatus = function(){
ngDialog.open({ template: 'views/popupTmpl.html' });
}
$scope.editStatus = function(){
//not entered yet
}
});
popupTmpl.html
<p>External modal template with external scope: <code>{{member.firstname}}</code></p>
When I click on the 'view' button, triggering the viewStatus() function, I don't get anything for {{member.firstname}} - anyone have any suggestions based off of what you see?
Thanks again!
In popupTmpl.html, you have to write ng-repeat = "member in members" then write {{memeber.firstname}}
Related
Introduction
I am trying to develop 2 selection (drop-down) boxes that populates the second box depending on the first selection.
for example
Choose product 1 and the second box will then have format 1, 2 and 5.
choose product 2 and the second may have format 2, 3 and 6.
Problem and Question
The first box has been populated by my array, but the second box is not populating depending on the selection not the first, in fact its not populating at all (see screen shot.
HTML
<div class="form-group">
<div ng-controller="dropDown">
<select ng-model="formData.ProductAndFormat" ng-options="product.name for product in productsandformats">
</select>
<select ng-model="formData.format" ng-if="user.productName"
ng-options="format.id as format.name for Format in user.productName.format">
</select>
</div>
</div>
controller.js
.controller('dropDown', function ($scope) {
$scope.productsandformats = [{
"name": "product 1",
"format": [{
"name": "format 1",
"id": "1"
}, {
"name": "format 2",
"id": "2"
}]
}, {
"name": "product 2",
"format": [{
"name": "format 3",
"id": "3"
},{
"name": "format 2",
"id": "2"
},
{
"name": "format 4",
"id": "4"
}, {
"name": "format 5",
"id": "5"
}]
}];
$scope.user = {productName: $scope.productsandformats[0], format: '1'};
$scope.displayModalValue = function () {
console.log($scope.user.productName);
}
})
Use this code ng-options="format.id as format.name for format in formData.ProductAndFormat.format" instead of your this code ng-options="format.id as format.name for format in user.productName.format"> on your second select box
var app = angular.module('anApp', []);
app.controller('dropDown', function ($scope) {
$scope.productsandformats = [{
"name": "product 1",
"format": [{
"name": "format 1",
"id": "1"
}, {
"name": "format 2",
"id": "2"
}]
}, {
"name": "product 2",
"format": [{
"name": "format 3",
"id": "3"
},{
"name": "format 2",
"id": "2"
},
{
"name": "format 4",
"id": "4"
}, {
"name": "format 5",
"id": "5"
}]
}];
$scope.formData={};
$scope.formData.ProductAndFormat = $scope.productsandformats[0];
$scope.displayModalValue = function () {
console.log($scope.user.productName);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<div ng-app="anApp" ng-controller="dropDown">
<div class="form-group">
<div ng-controller="dropDown">
<select ng-model="formData.ProductAndFormat" ng-options="product.name for product in productsandformats">
</select>
<select ng-model="formData.format"
ng-options="format.id as format.name for format in formData.ProductAndFormat.format">
</select>
</div>
</div>
</div>
I am retrieving records from mongodb .find() and trying to nest them with d3v4 .stratify(). Unfortunately, I'm getting the error
Error: ambiguous: Product Line 1
I'm presuming I'm misunderstanding the API documentation.
While the problem seems close to this post, I don't think it's quite the same. However, the result I'm trying to get to IS something like this.
Can someone help me understand how to use .stratify() properly? Or suggest an easier way to do this?
My result set (mongodb_data) is not large (maybe ~2500 products).
My flat mongodb_data looks like this,
[
{
"name": "Product Line 1",
"reference": "product 1.A identifier"
},
{
"name": "Product Line 1",
"reference": "product 1.B identifier"
},
{
"name": "Product Line 2",
"reference": "product 2.A identifier"
},
{
"name": "Product Line 2",
"reference": "product 2.B identifier"
}
];
The desired hierarchical/nested data needs to look like this,
{
"name": "Master Product Catalog",
"children": [
{
"name": "Product Line 1",
"children": [
{ "name": "product 1.A identifier" },
{ "name": "product 1.B identifier" }
]
},
{ "name": "Product Line 2",
"children": [
{ "name": "product 2.A identifier" },
{ "name": "product 2.B identifier" }
]
}
]
}
I have been using the example from the API documentation as follows,
var stratdata = d3.stratify()
.id(function(d) { return d.name; })
.parentId(function(d) { return d.name; })
(mongodb_data);
Your flat data doesn't represent a hierarchical structure. It doesn't answer the question who does "Product Line 1" or "Product Line 2" parent to? Also, your name property doesn't hold both the parent and the child information (reference is the parent, name is the child). Your data before d3.stratify() should look like this:
[{
"reference": "Master Product Catalog",
"name": "" //<-- has no parent
}, {
"reference": "Product Line 1",
"name": "Master Product Catalog" //<-- parent is master
}, {
"reference": "Product Line 2",
"name": "Master Product Catalog"
}, {
"name": "Product Line 1",
"reference": "product 1.A identifier"
}, {
"name": "Product Line 1",
"reference": "product 1.B identifier"
}, {
"name": "Product Line 2",
"reference": "product 2.A identifier"
}, {
"name": "Product Line 2",
"reference": "product 2.B identifier"
}];
Running code:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var json = [{
"reference": "Master Product Catalog",
"name": ""
}, {
"reference": "Product Line 1",
"name": "Master Product Catalog"
}, {
"reference": "Product Line 2",
"name": "Master Product Catalog"
}, {
"name": "Product Line 1",
"reference": "product 1.A identifier"
}, {
"name": "Product Line 1",
"reference": "product 1.B identifier"
}, {
"name": "Product Line 2",
"reference": "product 2.A identifier"
}, {
"name": "Product Line 2",
"reference": "product 2.B identifier"
}];
var root = d3.stratify()
.id(function(d) {
return d.reference;
})
.parentId(function(d) {
return d.name;
})
(json);
console.log(root)
</script>
</body>
</html>
I made a custom accordion template like so :
<div class="left_pane" ng-style="{height : mapStyle.height-82+'px'}">
<div class="accord_main_wrap">
<div class="accord_item_wrap" ng-repeat="head in heads">
<p class="accord_head" data-notvisible="true">{{head.text}}</p>
<div class="accord_content_wrap">
<ul>
<li ng-model="sub.text" ng-repeat="sub in head.subs">
<label>
<input type="checkbox" ng-model="sub.isChecked"/>
<span class="accordSubs">{{sub.text}}</span>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
I have a model which has states of the checkbox.
The problem is that the first checkbox gets updated / toggles (true/false) when the user clicks anywhere on the page.
This behavior is only seen in IE9.
IE9 above are ok, FF and Chrome are ok.
I am at my wits end, Really need help.
EDIT : Accompanying Model
[{
"id": "3",
"text": "Main Title One",
"subs": [{
"id": "5",
"text": "Sub Title One",
"isChecked": false,
"headId": "3",
"headTitle": "Main Title One",
"$$hashKey": "00E"
},
{
"id": "6",
"text": "Main Title One",
"isChecked": false,
"headId": "3",
"headTitle": "Sub Title Two",
"$$hashKey": "00F"
}],
"$$hashKey": "004"
},
{
"id": "4",
"text": "Main Title Two",
"subs": [{
"id": "7",
"text": "Sub Title One",
"isChecked": false,
"headId": "4",
"headTitle": "Main Title Two",
"$$hashKey": "00A"
},
{
"id": "9",
"text": "Sub Title Two",
"isChecked": false,
"headId": "4",
"headTitle": "Main Title Two",
"$$hashKey": "00B"
}],
"$$hashKey": "005"
}]
I have two models 'Author' and 'Publisher' (Rails), with a publisher hasOne author / author belongsTo publisher relationship.
I have the Ember models setup correctly -- JS Fiddle -- and the associations working when I manually push into the store. But only the publisher records are created when requesting /publishers index.
I've tried several types of JSON responses:
Publishers with author
{
"publishers": [
{
"id": 1,
"name": "Test P 1",
"author": 1
}
],
"author": {
"id": 1,
"name": "Test A 1",
"publisher": 1
}
}
Publishers with authors
{
"publishers": [
{
"id": 1,
"name": "Test P 1",
"author": 1
}
],
"authors": [{
"id": 1,
"name": "Test A 1",
"publisher": 1
}]
}
Publishers with author embedded
{
"publishers": [
{
"id": 1,
"name": "Test P 1",
"author": {
"id": 1
"name": "Test A 1"
}
}
]
}
Thanks for any help!
The ActiveModelAdapter/ActiveModelSerializer expects _id/_ids to be appended on relationships
{
"publishers": [
{
"id": 1,
"name": "Test P 1",
"author_id": 1
}
],
"authors": [{
"id": 1,
"name": "Test A 1",
"publisher_id": 1
}]
}
http://jsfiddle.net/6Z2AL/1/
Adding a link to ember-data issue in case it helps anyone -- single object push payload
Probably a trivial question for some. I have a view model for my objects that looks like so:
this.Activities = ko.observableArray([
{ "date": "28/11/2012 00:00:00",
"activities": [
{ "company": "BOW",
"description": "Backup Checks",
"length": "60"
},
{ "company": "AMS",
"description": "Data Request",
"length": "135"
},
]},
{ "date": "30/11/2012 00:00:00",
"activities": [
{ "company": "BOW",
"description": "Backup Checks",
"length": "60"
},
{ "company": "SLGT",
"description": "Software Development",
"length": "240"
},
{ "company": "BOW",
"description": "Data Request",
"length": "30"
},
]},
]);
I want to build an accordion which will hide activities arrays and will display dates. Whenever a date is clicked a list of activites matching this date will be presented by expanding appropriate panel below. Now, in the project I don't use Knockout.js for, I just use Id of a general Activity object to link ID attribute of accordion header with a name attribute in accordion body element. I use Model properties in the strongly typed view to achieve that. Since in the Knockout.js I feed a view model with the details of the Activities I have limited control over the structure of Html being created while data-binding. How can I link accordion headers with matching body elements then?
This assumes you are using the bootstrap accordions but should give you a good idea of how to do it with any accordion system.
http://jsfiddle.net/billpull/f8Cbb/1/show/
HTML
<div class="accordion" id="accordion2" data-bind="foreach: {data: Activities, as: 'activity'}">
<!-- ko template: 'accordionTmpl' --><!-- /ko -->
</div>
<script type="text/html" id="accordionTmpl">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-bind="text: activity.date, attr: { href: '#' + activity.order}"></a>
</a>
</div>
<div class="accordion-body collapse" data-bind="attr: { id: activity.order}">
<div class="accordion-inner">
<ul data-bind="foreach: {data: activity.activities, as: 'subActivity'}">
<li>
<span data-bind="text: subActivity.company"></span><br>
<span data-bind="text: subActivity.description"></span><br>
<span data-bind="text: subActivity.length"></span>
</li>
</ul>
</div>
</div>
</div>
</script>
Javascript
var ViewModel = function () {
this.Activities = ko.observableArray([
{ "date": "28/11/2012 00:00:00",
"order" : 1,
"activities": [
{ "company": "BOW",
"description": "Backup Checks",
"length": "60"
},
{ "company": "AMS",
"description": "Data Request",
"length": "135"
},
]},
{ "date": "30/11/2012 00:00:00",
"order" : 2,
"activities": [
{ "company": "BOW",
"description": "Backup Checks",
"length": "60"
},
{ "company": "SLGT",
"description": "Software Development",
"length": "240"
},
{ "company": "BOW",
"description": "Data Request",
"length": "30"
},
]},
]);
};
$(function () {
ko.applyBindings(new ViewModel());
});