如何用angularjs结果替换javascript中的变量？

Question

我在javascrip中的html中创建搜索建议功能。

在app.js（角度）中，通过使用http get：我从URL获取json数据并存储在$ scope.JSONresult中。

我想替换html中的列表：

['b0','b12','b22','b3','b4','b5','b6','b7','b8','b2','abd','ab','acd','accd','b1','cd','ccd','cbcv','cxf']

与{{JSONresult.relevantWord}}

下面是示例代码。

html和普通javascript：

<!doctype html> 
<html> 
<meta charset="utf-8"> 
<style> 
body { 
margin-left: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px; 
} 
.auto_hidden { 
width:204px;border-top: 1px solid #333; 
border-bottom: 1px solid #333; 
border-left: 1px solid #333; 
border-right: 1px solid #333; 
position:absolute; 
display:none; 
} 
.auto_show { 
width:204px; 
border-top: 1px solid #333; 
border-bottom: 1px solid #333; 
border-left: 1px solid #333; 
border-right: 1px solid #333; 
position:absolute; 
z-index:9999; 
display:block; 
} 
.auto_onmouseover{ 
color:#ffffff; 
background-color:highlight; 
width:100%; 
} 
.auto_onmouseout{ 
color:#000000; 
width:100%; 
background-color:#ffffff; 
} 
</style> 
<script language="javascript"> 
<!-- 
var $ = function (id) { 
return "string" == typeof id ? document.getElementById(id) : id; 
} 
var Bind = function(object, fun) { 
return function() { 
return fun.apply(object, arguments); 
} 
} 
function AutoComplete(obj,autoObj,arr){ 
this.obj=$(obj); // 
this.autoObj=$(autoObj);//  
this.value_arr=arr; // 
this.index=-1; //  
this.search_value=""; // 
} 
AutoComplete.prototype={ 
//  
init: function(){ 
this.autoObj.style.left = this.obj.offsetLeft + "px"; 
this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px"; 
this.autoObj.style.width= this.obj.offsetWidth - 2 + "px";//  
}, 
//  
deleteDIV: function(){ 
while(this.autoObj.hasChildNodes()){ 
this.autoObj.removeChild(this.autoObj.firstChild); 
} 
this.autoObj.className="auto_hidden"; 
}, 
// 
setValue: function(_this){ 
return function(){ 
_this.obj.value=this.seq; 
_this.autoObj.className="auto_hidden"; 
} 
}, 
//  
autoOnmouseover: function(_this,_div_index){ 
return function(){ 
_this.index=_div_index; 
var length = _this.autoObj.children.length; 
for(var j=0;j<length;j++){ 
if(j!=_this.index ){ 
_this.autoObj.childNodes[j].className='auto_onmouseout'; 
}else{ 
_this.autoObj.childNodes[j].className='auto_onmouseover'; 
} 
} 
} 
}, 
// change classname 
changeClassname: function(length){ 
for(var i=0;i<length;i++){ 
if(i!=this.index ){ 
this.autoObj.childNodes[i].className='auto_onmouseout'; 
}else{ 
this.autoObj.childNodes[i].className='auto_onmouseover'; 
this.obj.value=this.autoObj.childNodes[i].seq; 
} 
} 
} 
, 
// 
pressKey: function(event){ 
var length = this.autoObj.children.length; 
// 
if(event.keyCode==40){ 
++this.index; 
if(this.index>length){ 
this.index=0; 
}else if(this.index==length){ 
this.obj.value=this.search_value; 
} 
this.changeClassname(length); 
} 
// 
else if(event.keyCode==38){ 
this.index--; 
if(this.index<-1){ 
this.index=length - 1; 
}else if(this.index==-1){ 
this.obj.value=this.search_value; 
} 
this.changeClassname(length); 
} 
// 
else if(event.keyCode==13){ 
this.autoObj.className="auto_hidden"; 
this.index=-1; 
}else{ 
this.index=-1; 
} 
}, 
// 
start: function(event){ 
if(event.keyCode!=13&&event.keyCode!=38&&event.keyCode!=40){ 
this.init(); 
this.deleteDIV(); 
this.search_value=this.obj.value; 
var valueArr=this.value_arr; 
valueArr.sort(); 
if(this.obj.value.replace(/(^\s*)|(\s*$)/g,'')==""){ return; } 
try{ var reg = new RegExp("(" + this.obj.value + ")","i");} 
catch (e){ return; } 
var div_index=0; 
for(var i=0;i<valueArr.length;i++){ 
if(reg.test(valueArr[i])){ 
var div = document.createElement("div"); 
div.className="auto_onmouseout"; 
div.seq=valueArr[i]; 
div.onclick=this.setValue(this); 
div.onmouseover=this.autoOnmouseover(this,div_index); 
div.innerHTML=valueArr[i].replace(reg,"<strong>$1</strong>"); 
this.autoObj.appendChild(div); 
this.autoObj.className="auto_show"; 
div_index++; 
} 
} 
} 
this.pressKey(event); 
window.onresize=Bind(this,function(){this.init();}); 
} 
} 
//--> 
</script> 
<body> 
<div align="center" style="padding-top:50px"> 
<input type="text" style="width:300px;height:20px;font-size:14pt;" placeholder="please enter a or b " id="o" onkeyup="autoComplete.start(event)"> 
</div> 
<div class="auto_hidden" id="auto"><!--finish DIV--></div> 
<script> 
var autoComplete=new AutoComplete('o','auto',['b0','b12','b22','b3','b4','b5','b6','b7','b8','b2','abd','ab','acd','accd','b1','cd','ccd','cbcv','cxf']); 
</script> 
</body> 
</html>

app.js（angualrjs）

  var app = angular.module('myApp', []);
    app.controller('siteCtrl', function($scope, $http) {
      $http.get("http://www.xxxx.com/try/angularjs/data/sites.php")
      .success(function (response) {
       $scope.JSONresult = response.sites;});
    });

json数据：

{ "relevantWord": ["Lighthouse", "family", "house", "national Ranking", "national Years", "national Selection", "carbohydrate", "national Affiliation", "home Arena", "max Absolute Magnitude", "premiere Place", "automobile Model", "notable Commander", "intercommunality", "inhabitants Per Square Kilometre", "home Colour Hex Code", "inhabitants Per Square Mile", "cambodian Riel", "homage", "maiden Voyage"],
"namelist": ["123", "334", "4234"]
}

取代

<script> 
var autoComplete=new AutoComplete('o','auto',{{JSONresult.relevantWord}}); 
</script>

Answer 1

抱歉，如果我没有得到您想要的东西。 您可以尝试成功更改autoComplete：

autoComplete = new AutoComplete('o','auto',response.sites.relevantWord);