AngularJS中带数字变量赋值后无法正常显示值的语法问题求助

嘿，我懂你遇到的麻烦了——你想动态创建一个变量并在模板里显示它的值，但现在页面只输出了拼接后的变量名name0，而不是它的内容World，对吧？

问题出在哪？ #

你当前的模板表达式{{'name'+n}}只是在做字符串拼接：把字符串"name"和$scope.n的值0拼在一起，得到的就是"name0"这个字符串，而不是去访问$scope.name0这个属性的实际值。AngularJS模板不会自动把这个字符串解析成作用域上的属性名。

两种可行的解决方案 #

方案1：直接通过作用域对象访问动态属性

模板里可以用this来指代当前的作用域（也就是$scope），然后通过索引的方式获取动态属性的值：

<p>Hello {{this['name'+n]}}!</p>

你的JS代码不用改，还是：

$scope.n=0; 
$scope['name'+$scope.n] = 'World';

这样模板就会正确读取$scope.name0的值，页面会输出Hello World!。

方案2：用容器对象管理动态变量（更推荐）

直接把动态变量挂在$scope上容易造成作用域污染，更好的做法是创建一个专门的对象来存放这些动态属性：

$scope.n=0;
// 创建一个容器对象
$scope.dynamicProps = {};
// 把值存入容器的动态属性中
$scope.dynamicProps['name'+$scope.n] = 'World';

然后模板里访问这个容器的属性：

<p>Hello {{dynamicProps['name'+n]}}!</p>

这种方式更清晰，也符合AngularJS的最佳实践，避免作用域里出现太多零散的属性。

内容的提问来源于stack exchange，提问作者developer