Question

我有一个使用Angular的对象对象，categoryOne的内容会自动加载到我的页面上。如果单击一个按钮，我想调用我的控制器中的一个函数 - 即对象对象下面的loadContent函数 - 从页面中删除categoryOne的内容并在其位置注入categoryTwo的内容。

在我的loadContent函数中，我想定位categoryTwo content个对象的每个对象。换句话说，$scope.layout.categories.categoryTwo.content.contentX.text其中＆＃34; X＆＃34;可能是1或2。

问题是，我在网上找不到关于将动态变量连接到＆＃34;路径＆＃34;这是针对对象中的东西。在上面的段落中，＆＃34; X＆＃34;是动态变量和这个＆＃34;路径＆＃34;我指的是我试图从物体对象中抓取的东西，如果这是有意义的。

tl; dr 如何将动态变量连接到试图从对象对象中获取东西的路径？

非常感谢你帮助我。所有人的虚拟高五。</ p>

var app = angular.module("app1", []).controller("appCtrl", ["$scope", "$http", function($scope, $http)
{
    $scope.layout = 
    {
        "name": "test_proj",
        "title": "Test Project",
        "categories":
        {
            "categoryOne":
            {
                "heading": "Category 1",
                "links":
                {
                    "link1": "www.domain.com"
                },
                "content":
                {
                    "content1":
                    {
                        "text": "This is some text.",
                        "help": "Help text 1."
                    },
                    "content2":
                    {
                        "text": "Apples.",
                        "help": "Help text 2."
                    }
                }
            },
            "categoryTwo":
            {
                "heading": "Category 2",
                "links":
                {
                    "link1": "www.generic.com"
                },
                "content":
                {
                    "content1":
                    {
                        "text": "More text here.",
                        "help": "Help text 1."
                    },
                    "content2":
                    {
                        "text": "Oranges.",
                        "help": "Help text 2."
                    }
                }
            }
        }
    }


    $scope.loadContent = function()
    {
        var catLength = 0;

        for (var key in $scope.layout.categories.categoryTwo.content)
        {
            if ($scope.layout.categories.categoryTwo.content.hasOwnProperty(key))
            {
                ++catLength;
            }
        }

        $(".cool-container").html("");

        for (var x = 0; x < catLength; x++)
        {
            $(".cool-container").append("<p class='content'>" + $scope.layout.categories.categoryTwo.content.contentX.text + "</p>");
            // Where it says "contentX" in the line above, I want "X" to be a dynamic variable that will make it "content1" and "content2"
        }
    }
}]);

Answer 1

您可以执行$scope.layout.categories.categoryTwo.content["content" + X].text

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors

Answer 2

如果需要动态对象访问器，请使用括号语法而不是点语法：

E.g。

object['content' + x]

阅读更多：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors

如何将动态变量连接到对象路径

2 个答案: