2017-10-09 41 views
0

我使用的堆棧溢出API在angularJS應用程序和一些標題包含'而不是單引號圖標'AngularJS - 如何'轉換成JSON以單引號

如:

title: "Can't bind to 'ngModel' since it isn't a known property of 'input'" 

如何將其轉換爲ng-repeat之前將其轉換?

我看了一下,但不幸的是,沒有答案爲我工作。我試過{{question.title}}中的.replace以及控制器內的一種方法。

var loadFeed = angular.module('loadFeed', []); 

loadFeed.controller('feedController', ['$scope', '$http', function($scope, $http) { 

$scope.questions = []; 

$http({ 
    method: 'GET', 
    url: 'https://api.stackexchange.com/2.2/questions?&order=desc&sort=votes&tagged=angular&site=stackoverflow' 
}).then(function(feed) { 

    console.log('success'); 
    console.log(feed); 

    $scope.questions = feed.data.items; 


},function(error) { 
    console.log('error'); 
    console.log(error); 
}); 

}]); 

我想在更新這個{{question.title}}

<div ng-repeat="question in questions" ng-show="!!questions.length" class="question-list"> 
    <h2> 
    <a ng-href="{{question.link}}" title="{{question.title}}" target="_blank">{{question.title}}</a> 
    </h2> 
</div> 

回答

1

使用ng-bind-html指令上用於將內容綁定到HTML元素。

DEMO

angular.module('myapp', ['ngSanitize']) 
 
.controller('foo', function($scope) { 
 
    $scope.title = "Can&#39;t bind to &#39;ngModel&#39; since it isn&#39;t a known property of &#39;input&#39;"; 
 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script> 
 
<div ng-app="myapp" ng-controller="foo"> 
 
    <div ng-bind-html="title"></div> 
 
</div>

+1

三江源的幫助,這是工作與靜態 '$ scope.title =「燦'的...等等' ......不過,我不能讓它與'$ scope.title = $ scope.questions.title'一起工作 - 這會返回空 儘管'$ scope.title = $ scope.questions [0] .title'沒有顯示出來空的,但顯然只是顯示指定的對象 我錯過了什麼嗎?我試圖把它放到angular.forEach函數中,但是這重複了ng-bind-html =「title」 – Laura

2

可以使用ngBindHtml directive此,以$ SCE和trustAsHtml方法一起。

的Javascript:

(function(angular) { 
     'use strict'; 
    var loadFeed = angular.module('loadFeed', []); 

    loadFeed.controller('feedController', ['$scope', '$http', '$sce', function($scope, $http, $sce) { 

    $scope.questions = []; 
    $scope.trustAsHtml = $sce.trustAsHtml; 

    $http({ 
     method: 'GET', 
     url: 'https://api.stackexchange.com/2.2/questions?&order=desc&sort=votes&tagged=angular&site=stackoverflow' 
    }).then(function(feed) { 

     console.log('success'); 
     console.log(feed); 

     $scope.questions = feed.data.items; 


    },function(error) { 
     console.log('error'); 
     console.log(error); 
    }); 

    }]); 

    })(window.angular); 

HTML:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Example - example-ng-bind-html-production</title> 


    <script src="//code.angularjs.org/snapshot/angular.min.js"></script> 
    <script src="//code.angularjs.org/snapshot/angular-sanitize.js"></script> 
    <script src="script.js"></script> 



</head> 
<body ng-app="loadFeed"> 
    <div ng-controller="feedController"> 
<div ng-repeat="question in questions" ng-show="!!questions.length" class="question-list"> 
    <a ng-href="{{question.link}}" ng-bind-html="trustAsHtml(question.title)" target="_blank"></a> 
</div> 
</div> 
</body> 
</html> 

(也更新爲您的問題plunkr) 看到這個Plunker改編自例如幫助頁面

相關問題