我为ng-repeat创建了数组我还想要svg图标到数组我应该做什么
$scope.cal =[
{
name:"Calender",
svg:'M2,63h60c0.553,0,1-0.447,1-1V8c0-0.553-0.447-1-1-1H49V2c0-0.553-0.447-1-1-1s-1,0.447-1,1v5H33V2c0-0.553-0.447-1-1-1 s-1,0.447-1,1v5H17V2c0-0.553-0.447-1-1-1s-1,0.447-1,1v5H2C1.447,7,1,7.447,1,8v54C1,62.553,1.447,63,2,63z M3,61V23h58v38H3z M15,9v5c0,0.553,0.447,1,1,1s1-0.447,1-1V9h14v5c0,0.553,0.447,1,1,1s1-0.447,1-1V9h14v5c0,0.553,0.447,1,1,1s1-0.447,1-1V9h12v12 H3V9H15z'
},
{
name:"Mail",
svg:'M62.938,9.692c-0.021-0.065-0.05-0.123-0.084-0.182c-0.019-0.033-0.024-0.071-0.047-0.102c-0.016-0.021-0.039-0.031-0.056-0.051c-0.045-0.052-0.095-0.094-0.149-0.136c-0.05-0.039-0.099-0.076-0.155-0.104c-0.055-0.028-0.112-0.044-0.173-0.062c-0.067-0.02-0.132-0.036-0.202-0.041C62.047,9.013,62.026,9,62,9H2C1.974,9,1.953,9.013,1.928,9.015C1.858,9.02,1.793,9.036,1.726,9.055c-0.06,0.018-0.118,0.034-0.173,0.062C1.497,9.146,1.449,9.183,1.399,9.221C1.344,9.263,1.294,9.305,1.249,9.357c-0.017,0.02-0.04,0.03-0.056,0.051C1.17,9.44,1.165,9.477,1.146,9.51C1.112,9.569,1.084,9.627,1.062,9.692C1.04,9.758,1.029,9.823,1.022,9.891C1.018,9.929,1,9.961,1,10v44c0,0.553,0.448,1,1,1h60c0.552,0,1-0.447,1-1V10c0-0.039-0.018-0.071-0.022-0.109C62.971,9.823,62.96,9.758,62.938,9.692z M58.945,11L32,30.76L5.055,11H58.945z M3,53V11.974l28.409,20.833C31.584,32.936,31.792,33,32,33s0.416-0.064,0.591-0.193L61,11.974V53H3z'
},
{
name:"File Manager",
svg:'M8,63h32c0.1,0,0.3,0,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2l16-16c0.1-0.1,0.2-0.2,0.2-0.3C57,46.3,57,46.1,57,46V2c0-0.6-0.4-1-1-1H8C7.4,1,7,1.4,7,2v60C7,62.6,7.4,63,8,63z M41,59.6V47h12.6L41,59.6z M9,3h46v42H40c-0.6,0-1,0.4-1,1v15H9V3z'
},
{
name:"Gannt Chart"
},
{
name:"Scrum Board"
},
{
name:"To-Do"
},
];
答案 0 :(得分：0)
的 DEMO
(function() {
//angular module
var myApp = angular.module('myApp', []);
//test controller
myApp.controller('myController', function($scope) {
$scope.cal = [{
name: "Calender",
svg: 'M2,63h60c0.553,0,1-0.447,1-1V8c0-0.553-0.447-1-1-1H49V2c0-0.553-0.447-1-1-1s-1,0.447-1,1v5H33V2c0-0.553-0.447-1-1-1 s-1,0.447-1,1v5H17V2c0-0.553-0.447-1-1-1s-1,0.447-1,1v5H2C1.447,7,1,7.447,1,8v54C1,62.553,1.447,63,2,63z M3,61V23h58v38H3z M15,9v5c0,0.553,0.447,1,1,1s1-0.447,1-1V9h14v5c0,0.553,0.447,1,1,1s1-0.447,1-1V9h14v5c0,0.553,0.447,1,1,1s1-0.447,1-1V9h12v12 H3V9H15z'
}, {
name: "Mail",
svg: 'M62.938,9.692c-0.021-0.065-0.05-0.123-0.084-0.182c-0.019-0.033-0.024-0.071-0.047-0.102c-0.016-0.021-0.039-0.031-0.056-0.051c-0.045-0.052-0.095-0.094-0.149-0.136c-0.05-0.039-0.099-0.076-0.155-0.104c-0.055-0.028-0.112-0.044-0.173-0.062c-0.067-0.02-0.132-0.036-0.202-0.041C62.047,9.013,62.026,9,62,9H2C1.974,9,1.953,9.013,1.928,9.015C1.858,9.02,1.793,9.036,1.726,9.055c-0.06,0.018-0.118,0.034-0.173,0.062C1.497,9.146,1.449,9.183,1.399,9.221C1.344,9.263,1.294,9.305,1.249,9.357c-0.017,0.02-0.04,0.03-0.056,0.051C1.17,9.44,1.165,9.477,1.146,9.51C1.112,9.569,1.084,9.627,1.062,9.692C1.04,9.758,1.029,9.823,1.022,9.891C1.018,9.929,1,9.961,1,10v44c0,0.553,0.448,1,1,1h60c0.552,0,1-0.447,1-1V10c0-0.039-0.018-0.071-0.022-0.109C62.971,9.823,62.96,9.758,62.938,9.692z M58.945,11L32,30.76L5.055,11H58.945z M3,53V11.974l28.409,20.833C31.584,32.936,31.792,33,32,33s0.416-0.064,0.591-0.193L61,11.974V53H3z'
}, {
name: "File Manager",
svg: 'M8,63h32c0.1,0,0.3,0,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2l16-16c0.1-0.1,0.2-0.2,0.2-0.3C57,46.3,57,46.1,57,46V2c0-0.6-0.4-1-1-1H8C7.4,1,7,1.4,7,2v60C7,62.6,7.4,63,8,63z M41,59.6V47h12.6L41,59.6z M9,3h46v42H40c-0.6,0-1,0.4-1,1v15H9V3z'
}, {
name: "Gannt Chart"
}, {
name: "Scrum Board"
}, {
name: "To-Do"
},
];
$scope.setImageToSVG = function(svgPathData) {
if (!svgPathData || svgPathData == '') return;
var svgElem = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgElem.setAttributeNS (null, "viewBox", "0 0 " + 70 + " " + 70);
svgElem.setAttributeNS (null, "width", 70);
svgElem.setAttributeNS (null, "height", 70);
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
path.setAttribute('d', svgPathData);
svgElem.appendChild(path);
var xml = (new XMLSerializer).serializeToString(svgElem);
return "data:image/svg+xml;charset=utf-8," + xml;
}
});
})();<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<div ng-repeat="data in cal">
<label>key: {{data.name}}</label><br>
<img ng-src='{{setImageToSVG(data.svg)}}'><hr>
</div>
</div>
</div>
使用您的路径数据创建一个svg元素，并使用XMLSerializer序列化为xml，并将该值用作ng-src中的图像。