Please help me.
Here is my code.
Javascript:
var myMailMod = angular.module('myMail', []);
function configView($routeProvider)
{
$routeProvider.
when('/', {
templateUrl: 'list.html',
controller: 'ListController'
}).
when('/view/:id', {
templateUrl: 'details.html',
controller: 'DetailsController'
}).
otherwise({ redirectTo: '/' });
}
myMailMod.config(configView);
var messages = [
{
id:0, sender: 'mahshad', date:'14/8/2014',
recipients: ['missprogrammer#yahoo.com', 'test#gmail.com'],
subject: 'salam', text: 'salam shaghaliiiiii khobi? :x'
},
{
id:1, sender: 'enayat', date:'16/8/2014',
recipients: ['aryanpour1990#gmail.com'],
subject: 'salam', text: 'khobam to khobi? che khabar?!'
},
{
id:2, sender: 'nooshin', date:'18/8/2014',
recipients: ['nooshin#yahoo.com'],
subject: 'salam', text: 'salam chetoriah? hahaha :)'
}
];
myMailMod.controller('ListController', function($scope)
{
$scope.messages = messages;
});
myMailMod.controller('DetailsController', function($scope, $routeParams)
{
$scope.message = messages[$routeParams.id];
});
HTML(1):
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.21/angular.js" data-semver="1.2.21"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>myMail app</h1>
<div ng-view></div>
</body>
</html>
HTML(2):
<div>sender: {{messages.sender}}</div>
<div>date: {{messages.date}}</div>
<div>from: <span ng-repeat="recipient in messages.recipients">{{recipient}}</span></div>
<div>subject: {{messages.subject}}</div>
<div>{{messages.text}}</div>
HTML(3):
<table>
<tr>
<th>Sender</th>
<th>Subject</th>
<th>Date</th>
</tr>
<tr ng-repeat="message in messages">
<td>{{message.sender}}</td>
<td><a ng-href="#/view/{{messages.id}}">{{message.subject}}</a></td>
<td>{{message.date}}</td>
</tr>
</table>
What should i do?
Related
I created loopback applications by using git bash . I am using vue js for front end development . When I run the applications in localhost and try to access the html page . I got following errors in google chrome console windows ..
server.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
vue.js:634 [Vue warn]: Cannot find element: #catApp
Here is code .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="./server.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script>
const API = 'http://localhost:3000/api/Cat/';
let catApp = new Vue({
el: '#catApp',
data: {
cats: [],
cat: {
id: '',
name: '',
age: '',
gender: '',
breed: ''
}
},
created: function () {
this.getCats();
},
methods: {
getCats: function () {
fetch(API)
.then(res => res.json())
.then(res => this.cats = res);
},
storeCat: function () {
let method;
console.log('storeCat', this.cat);
// Handle new vs old
if (this.cat.id === '') {
delete this.cat.id;
method = 'POST';
} else {
method = 'PUT';
}
fetch(API, {
headers: {
'Content-Type': 'application/json'
},
method: method,
body: JSON.stringify(this.cat)
})
.then(res => res.json())
.then(res => {
this.getCats();
this.reset();
});
},
deleteCat: function (c) {
fetch(API + c.id, {
headers: {
'Content-Type': 'application/json'
},
method: 'DELETE'
})
.then(res => res.json())
.then(res => {
this.getCats();
});
// call reset cuz the cat could be 'active'
this.reset();
},
editCat: function (c) {
/*
This line was bad as it made a reference, and as you typed, it updated
the list. A user may think they don't need to click save.
this.cat = c;
*/
this.cat.id = c.id;
this.cat.name = c.name;
this.cat.age = c.age;
this.cat.breed = c.breed;
this.cat.gender = c.gender;
},
reset: function () {
this.cat.id = '';
this.cat.name = '';
this.cat.age = '';
this.cat.breed = '';
this.cat.gender = '';
}
}
});
</script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="catApp" v-cloak>
<h1>Cats</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Breed</th>
<td> </td>
</tr>
</thead>
<tbody>
<tr v-for="cat in cats">
<td #click="editCat(cat)" class="catItem" title="Click to Edit">{{cat.name}}</td>
<td>{{cat.age}}</td>
<td>{{cat.gender}}</td>
<td>{{cat.breed}}</td>
<td #click="deleteCat(cat)" class="deleteCat" title="Click to Delete">Delete</td>
</tr>
</tbody>
</table>
<form #submit.prevent="storeCat">
<p>
<label for="name">Name</label>
<input type="text" id="name" v-model="cat.name">
</p>
<p>
<label for="age">Age</label>
<input type="number" id="age" v-model="cat.age">
</p>
<p>
<label for="breed">Breed</label>
<input type="text" id="breed" v-model="cat.breed">
</p>
<p>
<label for="gender">Gender</label>
<input type="text" id="gender" v-model="cat.gender">
</p>
<input type="reset" value="Clear" #click="reset">
<input type="submit" value="Save Cat 🐱">
</form>
</div>
</body>
</html>
Here is the screen shot when I run the applications .
Put also all script tag before
Remove
<style>
[v-cloak] {
display: none;
}
</style>
and remove v-cloak
<div id="catApp" >
I use vue instance but it is not parsing , i think problem is relevant with using double quotes in Metro.dialog.Create.content.
Here is the main page include table and it works correctly.I added when dblclick table on main page open dialog and another table showing in this dialog.
var app2= new Vue({
el: '#appTable',
data: {
squads: [
]
},
mounted: function () {
Metro.init();
var self = this;
$.ajax({
url: '#Url.Action("Find", "Squad")',
method: 'GET',
success: function (data) {
self.squads = data;
},
});
},
methods:{
clickList: function (squad) {
bindSquadToEditTable(squad.ID);
Metro.dialog.create({
title: "Team",
content:
'<div class ="row-4-3 rowspan" >'+
'<div id="appTableMembers">'+
'<table class="table cell-border ">'+
'<thead>'+
'<tr>'+
'<th>Personal Code</th>'+
'<th>Name</th>'+
'<th>Email</th>'+
'</tr>'+
'</thead>'+
'<tbody>'+
"<tr v-for=squad in members :key=squad.PersonalCode > <td>{{squad.PersonalCode}}</td> <td>{{squad.FullName}}</td> <td>{{squad.Email}}</td>"+
'</tr>'+
'</tbody>'+
'</table>'+
'</div>',
});
}
}
});
That is my Main page;
<div id="appTable">
<table class="table striped">
<thead>
<tr>
<th>Code</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr v-for="squad in squads" :key="squad.Code" v-on:dblclick="clickList(squad)">
<td>{{squad.Code}}</td> <td>{{squad.Description}}</td>
</tr>
</tbody>
</table>
</div>
Here is the binding data to dialog ;
<script>
function bindSquadToEditTable(ID){
app3 = new Vue({
el: 'appTableMembers',
data: {
members:[]
},
mounted:function(){
Metro.init();
var self = this;
$.ajax({
type: "GET",
"url": '#Url.Action("FindByID", "Squad")',
"data": { id: ID },
"dataSrc": "",
success: function(data){
self.members = data;
},
});
}
})
}
</script>
I was curious how this would work so I threw together a quick test. Worked fine using the hidden <div> for the modal content.
HTML
<html>
<head>
<link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
</head>
<body>
<div id="app">
<input type="button" value="modal" #click="showModal" />
<div style="display: none" ref="modalContent">
<div>My name is {{name}}</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
</body>
</html>
Javascript
new Vue({
el: "#app",
data: {
name: 'Sample User'
},
methods: {
showModal: function() {
Metro.dialog.create({
title: "Modal Title",
content: this.getModalContent
});
},
getModalContent: function() {
return this.$refs.modalContent.innerHTML;
}
}
});
I change the my opinion and i will implement modal in the script;
<script type="text/template" id="data-input-form-template" >
<label>Code</label>
<input type="text" v-model="squad[0].Code"/>
<label>Name</label>
<input type="text" v-model="squad[0].Name" />
<label>Description</label>
<textarea style="height:175px" v-model="squad[0].Description"></textarea>
<div id="appTableMembers">
<table class="cell-border" >
<thead>
<tr>
<th>Personal Code</th>
<th>Adı</th>
</tr>
</thead>
<tbody>
<tr v-for="m in squad[0].members">
<td>{{m.PersonalCode}}</td>
<td>{{m.FullName}}</td>
</tr>
</tbody>
</table>
</div>
</script>
And this my openDialog function;
function openDialog(ID) {
var html = $('#data-input-form-template').html();
$('#data-input-form').html(html);
app4 = new Vue({
el:'#data-input-form',
data: function(){
return {
squad: [{
members: []
}]
}
},
mounted:function(){
Metro.init();
var self = this;
$.ajax({
type: "GET",
"url": '#Url.Action("FindByID", "Squad")',
"data": { id: ID },
"dataSrc": "",
success: function (data) {
self.squad = data;
},
error: function (error) {
alert(error);
}
});
}
});
Metro.dialog.open('#demoDialog1');
}
Main Page html;
<div class="dialog" data-role="dialog" id="demoDialog1"> src="#" />
<div class="dialog-content" style="height:400px">
<form id="data-input-form">
</form>
</div>
</div>
I am a fresher.I try to use scope slot and directive to create a list sample ,the code follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作用域插槽</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="app">
<app></app>
</div>
</body>
<script>
Vue.directive("selectall",{
bind:function(el,binding,vnode,oldVnode){
var arg = binding.arg,
value = binding.value;
console.log(arg,value);
$(el).on('change',function(){
});
}
});
Vue.component("list",{
template:"<div><ul>"
+"<slot name='item' v-for='item in litodos' :text= 'item.text' :time='item.time' :idx='item.idx'></slot>"
+"</ul>"
+"</div>",
props:['litodos'],
data:function(){
return {
message:"list-message"
}
}
});
Vue.component("app",{
template:"<div class='container'>"
+" <input type='checkbox' v-selectall:parent='group1'/>select all gruop1"
+"<list :litodos='todos1'>"
+"<template slot='item' scope='props'>"+
+"<li><input type='checkbox' value='{{props.idx}}' v-selectall:child='group1'/>{{props.text}} </li>"
+"</template>"
+"</list>"
+" <hr><input type='checkbox' v-selectall:parent='group2'/>select all gruop2"
+"<list :litodos='todos2'>"
+"<template slot='item' scope='props'>"+
+"<li><input type='checkbox' value='{{props.idx}}' v-selectall:child='group2'/>{{props.text}}</li>"
+"</template>"
+"</list>"
+"</div>",
data:function(){
return {
group1:"group1",
group2:"group2",
todos1:[
{
text:'study english',
time:'3hour',
idx:'1'
},{
text:'study vue',
time:'2hour',
idx:'2'
}
],
todos2:[
{
text:'学英语',
time:'3hour',
idx:'3'
},{
text:'学js',
time:'2hour',
idx:'4'
}
]
};
}
})
var app = new Vue({
el: '#app',
data:{}
});
</script>
</html>
and here are essential fragment:
+"<list :litodos='todos1'>"
+"<template slot='item' scope='props'>"+
+"<li><input type='checkbox' value='{{props.idx}}' v-selectall:child='group1'/>{{props.text}} </li>"
+"</template>"
+"</list>"
but the result is like this:
enter image description here
I find out that the slot return to NaN,so I am so confused.Can you help me find the keys point to resolve this bug?Thank you!
I'm using angularJs and new to it. I'm facing problem in $routeProvider.
Thanks in advance if someone may help me :)
when i see in firebug it show reference not set for $routeProvider.
here is my code..
main.html.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="demoApp"><!--you can use data-ng-app directive also-->
<head>
<title>Using Directive With DataBinding</title>
<script src="Scripts/angular.min.js"></script>
<script>
//var demoApp = angular.module('demoApp', ['helperModule']);
var demoApp = angular.module('demoApp', []);
demoApp.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'SimpleController',
templateUrl: 'View1.html'
})
.when('/view2', {
controller: 'SimpleController',
templateUrl: 'View2.html'
})
.otherwise({ redirectTo: '/' });
});
var controllers = {};
controllers.SimpleController = function ($scope) { // here $scope is dependency injection
$scope.customers = [
{ name: 'Sombir', city: 'Rohtak' },
{ name: 'Surender', city: 'Hissar' },
{ name: 'Virender', city: 'Panipat' },
{ name: 'Kapil', city: 'Jhajjar' }
];
$scope.addCustomer = function() {
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
};
};
demoApp.controller(controllers);
</script>
</head>
<body>
<div>
<div data-ng-view=""><!--PlaceHolder for views--></div>
</div>
</body>
</html>
View1.html
-----------------
<div class="container">
Name:
<input type="text" ng-model="filter.name" /><!--you can use data-ng-model directive also-->
<h3>Adding A simple Controller --View1</h3>
<ul>
<li data-ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">{{cust.name | uppercase}}---{{cust.city}}</li>
</ul>
<br/>
Customer Name:
<input type="text" ng-model="newCustomer.name"/>
Customer City:
<input type="text" ng-model="newCustomer.city" />
<br/>
<button ng-click="addCustomer()">Add Customer</button>
View2
</div>
You forgot to inject 'ngRoute' in your module 'demoApp' in your script tag
var demoApp = angular.module('demoApp', ['ngRoute']);
Can someone suggest how can I place check boxes against each folder of the below tree hierarchy? I am trying to add check-boxes but it is not showing up in my tree shown below. Please suggest the changes i need to make for my below code to get the checkbox displayed. This is a working code , just copy paste the same in a textpad and open in IE allowing activex.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/grid/resources/claroGrid.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
data-dojo-config="isDebug: true,parseOnLoad: true"></script>
<link rel="stylesheet" href="css/style.css" media="screen">
<script>
dojo.require("dojo.parser");
dojo.require("dijit.form.Form");
dojo.require("dijit.form.Select");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dijit.tree.dndSource");
dojo.require("dijit.Tree");
dojo.addOnLoad(function() {
dojo.byId('loaderInner').innerHTML += " done.";
setTimeout(function hideLoader(){
dojo.fadeOut({
node: 'loader',
duration:500,
onEnd: function(n){
n.style.display = "none";
}
}).play();
}, 250);
});
var store;
var selectedItemId = 0;
var itemSelected = null;
var sel = null;
var idCount = 0;
var treeModel;
var mytree;
var modeSelector;
dojo.ready(function(){
store = new dojo.data.ItemFileWriteStore({
contentType: 'application/json',
target: 'store',
url: "http://pmis.biz/rwa/data/ProjectList.php"
});
treeModel = new dijit.tree.ForestStoreModel({
iconClass: 'dijitEditorIcon dijitEditorIconCut',
store: store,
query: {"main": 0},
rootId: 0,
rootLabel: "project",
pasteItem: function(){},
mayHaveChildren : function(item) {
return true;
},
getChildren: function(parentItem, callback, onError) {
if(parentItem.root == true ){
if(this.root.children){
callback(this.root.children);
}else{
this.store.fetch({
query: this.query,
queryOptions: {cache:false},
onComplete: dojo.hitch(this, function(items){
this.root.children = items;
callback(items);
}),
onError: onError
});
}
} else {
console.debug("Tree child onLoad here: "+parentItem.id);
if (idCount < parseInt(parentItem.id)){
idCount = parseInt(parentItem.id);
}
var sx = parseInt(parentItem.id);
this.store.fetch({
query: { main: sx },
queryOptions: {cache:false},
onComplete: dojo.hitch(this, function(items){
this.root.children = items;
callback(items);
}),
onError: onError
});
}
}
});
mytree = new dijit.Tree({
model: treeModel,
openOnClick:true,
showRoot: true,
setCheckboxOnClick : true,
// onDblClick: function (item, node, evt){
// },
onClick: function (item, node, evt){
resetEditor();
}
}, "treeThree");
});
</script>
</head>
<body class="claro">
<!-- BorderContainer -->
<div id="main" data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="liveSplitters:false, design:'headline',
style:'width:100%; height:100%; max-width:1050px; min-width:680px; min-height:400px; margin: 0 auto;'">
<!-- AccordionContainer-->
<div data-dojo-type="dijit.layout.AccordionContainer"
data-dojo-props="region:'leading', splitter:true, minSize:20" style="width: 630px;" id="leftAccordion">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'NG Tree Hierarchy'">
<div data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="title:'Rootless Tree',
style:'width:30%; height:100%; max-width:1050px; min-width:250px; min-height:300px; margin: 0 auto; float:left'">
<div id="treeThree"></div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Rootless CCCCCC'">
<!-- Project selector -->
<div id=help"></div><br>
<br>
<!-- <select id="f_2"></select>-->
<br>
<div>
<table style="width: 135px; height: 83px;">
<tr><td>
<div id="ip"></div>
</tr><tr><td>
<button id="bd" data-dojo-type="dijit.form.Button" style="visibility:hidden"
data-dojo-id="bd"
data-dojo-props="disabled: true,
onClick: function (evt){
store.deleteById(selectedItemId);
resetEditor();
},
label:'Delete project' ">
</button>
<button id="bs" data-dojo-type="dijit.form.Button" style="visibility:hidden"
data-dojo-id="bs"
data-dojo-props="disabled: true,
onClick: function (evt){
var lvalue = dijit.byId('s1').value;
store.setValue(itemSelected, 'title', dijit.byId('s1').value);
store.setValue(itemSelected, 'description', dijit.byId('s2').value);
store.save();
},
label:'Save project' ">
</button>
<button id="ba"data-dojo-type="dijit.form.Button" style="visibility:hidden"
data-dojo-id="ba"
data-dojo-props="disabled: true,
onClick: function (evt){
idCount = idCount +1;
var newItem = {};
newItem.id = idCount;
newItem.main = selectedItemId;
newItem.title = dijit.byId('s1').value;
newItem.description = dijit.byId('s2').value;
store.newItem(newItem);
sel.setStore(store,'',{query:{main: 0}});
/* mytree.update();*/
},
label:'Add project' ">
</button>
<br>
<button onclick="mytree.refreshModel()" style="visibility:hidden">
Update
</button>
</tr>
</table>
<br>
</div>
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:''">
<div></div>
</div>
</div>
<div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
</div>
<!-- Top tabs (marked as "center" to take up the main part of the BorderContainer) -->
<div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center', tabStrip:true" id="topTabs">
<div id="basicFormTab1" data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="title:'Tab1', style:'padding:10px;display:none;'">
<p> </p>
</div>
<div id="basicFormTab2" data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="title:'Tab2', style:'padding:10px;display:none;'">
<p> </p>
</div>
<div id="basicFormTab3" data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="title:'Tab3', style:'padding:10px;display:none;'">
<p> </p>
</div>
</div>
</div>
</body>
</html>
A library was created for this:
http://www.thejekels.com/dojo/cbtree_AMD.html
The instruction manual is kind of hard to find from that site. It is a github wiki here: https://github.com/pjekel/cbtree/wiki/CheckBox-Tree. Download the git repo, then follow instructions at https://github.com/pjekel/cbtree/wiki/Installation, and you should be good to go.
Try this one (tested on dojo 1.10):
require(["dojo/_base/connect", "dijit/dijit", "dojo/data/ItemFileReadStore", "dijit/Tree", "dijit/form/CheckBox",
"dojo/domReady!"],
function (connect, dijit, ItemFileReadStore, Tree, CheckBox) {
var store = new ItemFileReadStore({
data: {
identifier: 'id',
label: 'label',
items: rawdata
}
});
var treeControl = new Tree({
store: store,
showRoot: false,
_createTreeNode: function (args) {
var tnode = new Tree._TreeNode(args);
tnode.labelNode.innerHTML = args.label;
var cb = new CheckBox();
cb.placeAt(tnode.labelNode, "first");
connect.connect(cb, "onChange", function () {
var treeNode = dijit.getEnclosingWidget(this.domNode.parentNode);
connect.publish("/checkbox/clicked", [{
"checkbox": this,
"item": treeNode.item
}]);
});
return tnode;
}
}, "CheckboxTree");
connect.subscribe("/checkbox/clicked", function (message) {
console.log("you clicked:", store.getLabel(message.item));
});
}); // require
var rawdata = [{
label: 'Level 1',
id: '1',
children: [{
label: 'Level 1.1',
id: '1.1',
active: true
},
{
label: 'Level 1.2',
id: '1.2',
active: true
}]
},
{
label: 'Level 2',
id: '2',
children: [{
id: '2.1',
label: 'Level 2.1',
active: false
},
{
id: '2.2',
label: 'Level 2.2',
active: true
},
{
id: '2.3',
label: 'Level 2.3',
active: true
}]
}];