Javascript 在HTML中使用字符串访问范围键

我想显示服务器通过websocket动态创建和更新的按钮列表。 我的范围如下所示：

$scope = {
  buttons: ["buttonA", "buttonB"],
  buttonA: { caption: "OK" },
  buttonB: { caption: "Cancel" }
};

<div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-repeat="b in buttons">
        <button>{{b.caption}}</button>
    </div>
</div>
<script>
var app = angular.module("myApp", []);

app.controller("MyCtrl",function ($scope) {
    $scope.buttons = [{ caption: "OK" }, { caption: "Cancel" }];
});
</script>

<div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-repeat="b in buttons">
        <button>{{lookup(b).caption}}</button>
    </div>
</div>
<script>
var app = angular.module("myApp", []);

app.controller("MyCtrl",function ($scope) {
    $scope.buttons =  ["buttonA", "buttonB"];
    $scope.buttonA = { caption: "OK" };
    $scope.buttonB = { caption: "Cancel" };

    $scope.lookup = function(key) {
        return $scope[key];
    }
});
</script>

在HTML中，我将使用ng repeat遍历按钮列表，将它们添加到DOM中，并使用每个按钮的caption属性作为“value”属性

---

但是我不知道如何从HTML中的字符串访问json字段。

我不知道您为什么需要这样的模型。您只需在$scope中维护按钮即可。按钮如下：

$scope = {
  buttons: ["buttonA", "buttonB"],
  buttonA: { caption: "OK" },
  buttonB: { caption: "Cancel" }
};

<div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-repeat="b in buttons">
        <button>{{b.caption}}</button>
    </div>
</div>
<script>
var app = angular.module("myApp", []);

app.controller("MyCtrl",function ($scope) {
    $scope.buttons = [{ caption: "OK" }, { caption: "Cancel" }];
});
</script>

<div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-repeat="b in buttons">
        <button>{{lookup(b).caption}}</button>
    </div>
</div>
<script>
var app = angular.module("myApp", []);

app.controller("MyCtrl",function ($scope) {
    $scope.buttons =  ["buttonA", "buttonB"];
    $scope.buttonA = { caption: "OK" };
    $scope.buttonB = { caption: "Cancel" };

    $scope.lookup = function(key) {
        return $scope[key];
    }
});
</script>

{{b.caption}
var-app=angular.module（“myApp”，[]）；
app.controller（“MyCtrl”，函数（$scope）{
$scope.buttons=[{caption:“OK”}，{caption:“Cancel”}]；
});

如果出于某种原因需要在作用域的“根”上显示各个按钮，可以使用如下查找功能：

$scope = {
  buttons: ["buttonA", "buttonB"],
  buttonA: { caption: "OK" },
  buttonB: { caption: "Cancel" }
};

<div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-repeat="b in buttons">
        <button>{{b.caption}}</button>
    </div>
</div>
<script>
var app = angular.module("myApp", []);

app.controller("MyCtrl",function ($scope) {
    $scope.buttons = [{ caption: "OK" }, { caption: "Cancel" }];
});
</script>

<div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-repeat="b in buttons">
        <button>{{lookup(b).caption}}</button>
    </div>
</div>
<script>
var app = angular.module("myApp", []);

app.controller("MyCtrl",function ($scope) {
    $scope.buttons =  ["buttonA", "buttonB"];
    $scope.buttonA = { caption: "OK" };
    $scope.buttonB = { caption: "Cancel" };

    $scope.lookup = function(key) {
        return $scope[key];
    }
});
</script>

{{查找（b）.caption}
var-app=angular.module（“myApp”，[]）；
app.controller（“MyCtrl”，函数（$scope）{
$scope.buttons=[“buttonA”，“buttonB”]；
$scope.buttonA={标题：“确定”}；
$scope.buttonB={标题：“取消”}；
$scope.lookup=函数（键）{
返回$scope[key]；
}
});

太简单了。我希望这样，因为数组表示按钮在页面上的显示方式（按钮的网格表示为数组的数组）。另一方面，我不希望更新按钮属性的函数弄乱数组。阵列中可能不存在按钮，我仍然希望服务器更新其状态。