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

【问题标题】：how to replace the variable in javascript with the angularjs result?如何用angularjs结果替换javascript中的变量？
【发布时间】：2017-01-13 07:45:20
【问题描述】：

我在 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>

【问题讨论】：

您想显示一个包含所有项目的列表吗？为此使用ng-repeat。
我编辑我的问题

标签： javascript jquery angularjs json

【解决方案1】：

对不起，如果我没有得到你想做的事。您可以尝试在成功中更改自动完成：

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

【讨论】：

你想改变autoComplete还是改变html本身？如果您想更改您的 autoComplete 变量，您需要执行脚本。只是替换脚本标签内容不会改变任何东西
你可以成功地做到这一点autoComplete=new AutoComplete('o','auto',$scope.JSONresult.relevantWord);