我正在尝试使用SVG和angular指令创建一个图形来更改动态部分.现在我已经这样做了:
http://plnkr.co/edit/TcbK7kyzM3tapDISxndh?p=preview
app.directive('pieChart', function($document) {
return {
restrict: "E",
template: '<svg width="500" height="500">' +
'<path d="M100,200 a150,150 0 1,0 150,-150" stroke="black" stroke-width="10" fill="none"></path>' +
'</svg>',
scope: {
value: '='
},
link: function(scope, elem, attr) {
}
}
});
我希望我的图表在100%的价值时看起来像这样,当价值是 - 比方说 - 45%时,我希望看到这条线,但是距离顶部中心只有45%的长度.我可能不得不重新计算路径的路径值,但我想问一下,当我改变路径时,是否可以使用JS来改变大小？
提前感谢您,或者如果您有任何人知道这方面的好教程,请将其链接到我.
编辑:我将指令更改为一个简单的条形图,但这仅仅是例如,我知道这可以在没有SVG的情况下完成,因为你可以使用div进行,但我希望图表更加复杂.
这是一个jsfiddle http://jsfiddle.net/fg9e7eo4/1/
在我的例子中,图表保持动画,我想让它只有一次动画,而不是保持在那一点.
顺便说一句,这是我正在尝试使它工作的指令:
testApp.directive('pieChart', function() {
var html =
'<svg width="510" height="20" style="background: #fff">' +
'<path d="{{path}}" stroke="red" stroke-width="10" fill="none">' +
'<animate dur="1s" repeatCount="indefinite" attributeName="d" values="{{path2}}"/>' +
'</path>' +
'</svg>';
return {
restrict: 'E', …我正在制作一个HTML电子邮件,我正在使用来自谷歌webfonts的字体Oswald.我使用这一行将它插入到html中:
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
似乎字体没有显示在谷歌邮件客户端..是否有任何其他方式来实现这种字体的HTML邮件,以便在谷歌邮件中显示它？
谢谢你,丹尼尔.
我正在尝试实现一个内容,我需要有一个100%的浏览器宽度的一部分,在其中我需要在左边的大小一个宽度为200px的div,在它的右边我需要有动态宽度的div取决于浏览器的宽度.示例.. browser = 900px - > left div 200px right div 700px.并且两个div都具有动态高度,具体取决于我放入多少信息..包装器div将占用这2个div高度中的最大值.
到目前为止,我做了类似这个HTML的东西
<section id="wrapper">
<div id="list">
</div>
<div id="grid">
</div>
</section>
CSS
#wrapper {
width: 100%;
min-width: 1000px;
margin: 0 auto;
padding: 40px 0;
overflow: hidden;
}
现在我需要css #list和#grid divs.我希望有一个有效的解决方案,因为稍后我会在#grid div中做同样的事情:)
谢谢你,丹尼尔!
我试图在angularJS和post消息部分创建一个博客我希望从json获取消息并将其添加到这样的内容div
<div class="content">
{{json.message}}
</div>
现在我的div中有一个段落,它实际上是一个像这样的HTML代码
<p>this is my message</p>
但是当我这样做时,我在屏幕上看到了这一点
<p>this is my message</p>
作为文字.我理解在以前的版本中我可以使用ng-bind-html-unsafe但我使用的是angularJS的v1.2.谁能告诉我类似于ng-bind-html-unsafe的代码,以便我可以在v1.2中完成这项工作？谢谢你,丹尼尔!
我正在尝试创建一个处理Angular 2中的联系人的服务.这是我到目前为止所做的.
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class ContactsService {
constructor(private http: Http) { }
addContact(contact): Promise<any> {
return this.http
.post('http://localhost:8000/contacts', contact)
.toPromise()
.then(response => response.json())
.catch(error => error.json());
}
}
现在服务工作正常,如果我400+在响应上获得状态代码,代码就会catch凝视,如果200代码进入then状态并返回响应.
但是当我在一个组件中使用它时,then无论是否正常,它都会进入状态.
addingContact() {
this.contactsService
.addContact(this.user)
.then(
(contactx) => { console.log('THEN = ' + JSON.stringify(contactx)); },
(err) => { console.log('CATCH = ' + JSON.stringify(err)); }
);
}
有什么我缺少的,我应该在服务上扔东西,所以代码进入错误开始,我得到一个 …
我在div列表上使用ng-repeat,我手动在json中添加它渲染此div的项目.我需要定位我在json中添加的最后一个div,它会自动在屏幕上进行渲染,其中couse光标是,并且其余部分保持在相同的位置,但是没有给出渲染它的json中的位置.
我对此的处理是这样的
<div ng-repeat="contact in jsonContacts" style="left: {{lastX}}px; top: {{lastY}}px;"></div>
但是当我这样做时,所有的div都得到这个位置,所以我需要使用$ last变量来添加或删除带有left和top css的样式标记.
谢谢你,丹尼尔!
我正在尝试使用angularJS创建一个博客页面,在消息部分我有一个像这样的div.
<div class="post-content">
{{jsonPost.message}}
</div>
在变量jsonPost.message里面我有一个这样的字符串
<p>paragraph 1</p>
<p>paragraph 2</p>
但改为创建2个html段落,而不是我<p>在屏幕上看到文本以及文本.有没有办法让他们成为HTML代码？而不是通过CSS定位他们.谢谢你,丹尼尔!
我有一个模板列表,我想从列表中选择其中一个,并将id传递给表单内的输入.我的呐喊看起来像这样
<form>
<input type="hidden" name="template_id" ng-model="template.template_id" />
<input type="text" name="template_name" ng-model="template.template_name" />
<ul>
<li id="1">Template1</li>
<li id="2">Another Template</li>
</ul>
<button type="submit"></button>
</form>
现在我想按下任何<li>项目,从输入中更改内容.可以使用指令完成吗？谢谢你,丹尼尔.
当我按下第一个列表项,我想具有template_id和TEMPLATE_NAME的输入设置为template_id = 1和TEMPLATE_NAME =模板1和当我按下第二列表项,设置template_id至2和TEMPLATE_NAME到另一个的模板.
我正在尝试使用 mongoose 制作一个 REST API，我想隐藏 __v 属性，并且通过执行以下操作成功将其隐藏在 find 和 findById 上：
Contact.find({}, '-__v', function(error, list) { });
Contact.findById(req.params.id, '-__v', function(error, item) { });
但是当我使用创建方法时
Contact.create(req.body, function(error, item) { });
它返回给我添加了 __v 属性的项目。
我还尝试了在这样的模式上使用 select: false 的方法
__v: {
type: Number,
select: false
}
此方法也执行相同的操作，它从 find 和 findById 中隐藏 __v 属性，但也不从 crate 方法返回的对象中隐藏它。
我有一个JSON变量,如下所示:
{"events": [
{"event_id": "1", "event_name": "Breakfast"},
{"event_id": "1", "event_name": "Calling Bob"}
]}
我需要使用javascript在每个事件中推送另一个属性,并使其如下所示:
{"events": [
{"event_id": "1", "event_name": "Breakfast", "event_type": "calendar"},
{"event_id": "1", "event_name": "Calling Bob", "event_type": "calendar"}
]}
我正在尝试制作一个圆环图，我想在值发生变化时为半圆路径设置动画，但“d”路径的变换看起来并不“自然”。这是我到目前为止得到的：
<svg height="400" width="400" style="background: #fff">
<g transform="translate(200,200), scale(75)" stroke-width="0.01" stroke="white">
<path d="M 1 0 L 2 0 A 2 2 0 0 1 -1.03903 -0.166952 L -0.519515 -0.0834762 A 1 1 0 0 0 1 0" stroke-width="0.01" stroke="black" fill="green">
<animate attributeName="d" from="M 1 0 L 2 0 A 2 2 0 1 1 0.10467191248588789 -1.9972590695091477 L 0.052335956242943946 -0.9986295347545738 A 1 1 0 1 0 1 0" to="M 1 0 L 2 0 A 2 2 0 0 1 -1.7492394142787915 …