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

时间:2014-11-18 10:51:53

标签: javascript angularjs

我想显示服务器通过websocket动态创建和更新的按钮列表。 我的范围看起来像这样:

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

在我的HTML中,我将使用ng-repeat来浏览按钮列表,将它们添加到DOM并使用每个按钮的caption属性作为“value”属性。

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

1 个答案:

答案 0 :(得分:1)

我不确定你为什么要这样的模特。你可以像这样维护$ scope.buttons中的按钮:

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

如果您想要使用示波器“root”上的各个按钮,您可以使用这样的查找功能:

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