AngularJS如何动态设置绑定元素的值答案

【问题标题】：AngularJS how to set dynamically value of binding elementAngularJS如何动态设置绑定元素的值
【发布时间】：2016-09-27 10:38:18
【问题描述】：

我需要基于一个页面变量来改变一个绑定元素的值。

这是页面内变量：

<script type="text/javascript">
 var myVar = 'value1';
</script>

这是带有绑定元素的选择：

<select value="">
 <option ng-repeat="value in valueList">
  {{myNewValue()}}
 </option>
</select>

这里是控制器：

$scope.inPageVar = $window.myVar;

$http.get(jsonUrl).then(function(result) {
    $scope.valueList = result.data.valueList;
    $scope.myNewValue = function() {
      return $scope.valueList[0].additional + $scope.inPageVar;
    };
});

这里是 JSON 结构：

"valueList": [
          {
            "additionnal": {
              "value1": "this is value 1",
              "value2": "this is value 2"
            }
          },
          {
            "additionnal": {
              "value1": "this is value 3",
              "value2": "this is value 4"
            }
          }
        ]

我想知道如何将页内 var 值与 get 函数的元素连接起来。谢谢！

【问题讨论】：

在将 myVar 设置为全局变量或将其添加到 $rootScope 之前，您无法实现此目的
我该怎么做？
你想在角度控制器中分配一个javascript变量吗？
我想得到这样的结果： $scope.myNewValue + $scope.inPageVar 就像我有'result.data.valueList.additional。

标签： javascript angularjs binding

【解决方案1】：

(function() {

  angular.module("CombineModule", []).controller('MyController', function() {
    this.values = [{
      "additional": {
        "value1": "this is value 1",
        "value2": "this is value 2"
      }
    }, {
      "additional": {
        "value1": "this is value 3",
        "value2": "this is value 4"
      }
    }];

    this.myNewValue = function(index) {
      return this.values[index].additional[myVar];
    };
  });

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="CombineModule">

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>
    var myVar = 'value1';
  </script>
</head>

<body ng-controller="MyController as v">
  <select value="">
    <option ng-repeat="value in v.values">
      {{v.myNewValue($index)}}
    </option>
  </select>
  <script src="app.js"></script>
</body>

</html>

如果要全局公开 myVar，

写window.myVar = 'some value'而不是var myVar = 'someval'。

或者，如果您想将其提供给$rootScope.myVar = 'some value'

那么按照你的逻辑，

return $scope.valueList[0].additional[window.myVar];

【讨论】：

myVar 来自后端，它打印在 HTML 中的我想全局公开它以像这样使用它：'result.data.valueList.additional .
嗯，但如果我写 console.log($scope.inPageVar);它打印 myVar 值
那么你的意思是你可以得到变量的值但不能赋值？
@paolopolix 用 sn-p 更新了答案