如何访问一个对象内部的数组,该对象本身在Angular中的json文件数组中?

时间:2016-03-14 01:19:48

标签: javascript arrays angularjs json angularjs-ng-repeat

这是我的控制器Angular代码,一切正常,但$scope.Product除外,我无法访问产品详细信息数组(样机和产品详细信息及其下方)是html代码,我希望添加所访问的产品详细信息并在ng-repeat

中进行迭代



 .controller('aboutCtrl', function ($scope, aboutService) {
        var promise = aboutService.getAbout();
        promise.then(function (rcdata) {
            $scope.about = rcdata.data.about;
            $scope.products = rcdata.data.products;
            $scope.mobileProduct = rcdata.data.mobileProduct;
            $scope.clients = rcdata.data.clients;
            $scope.anytime = rcdata.data.anytime;
            $scope.lobProduct = rcdata.data.lobProduct;
            $scope.Product = rcdata.data.lobProduct.projectsdetails;
        });
    })

    <section class="product-detail padding">
        <div class="container">
            <div class="row">
                <div class="col-md-6" data-ng-repeat="detial in Product">
                    <div class="prdct-d">
                        <img class="img-responsive" src="<?php echo $img; ?>Computer/{{detial.mockup}}">
                        <p>
                            {{detail.description}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
&#13;
&#13;
&#13; 这是json文件
&#13;
&#13;
{
    "products": [
        {
            "icon": "flaticon-computer",
            "title": "Line Of Business",
            "description": "Root Cave focus on delivering top notch data driven line of business application which are mission critical software specific to the business. We understand the needs and expectations for the user experience and design simple interfaces for complex web applications that help users do more with less."
        },
        {
            "icon": "flaticon-technology-2",
            "title": "Mopile App",
            "description": "Mobile devices are increasingly utilized to access content and interact with brands. So, it is critical that you have a well-designed and solidly executed mobile experience. Root Cave provides clients with brand consistency through and throughout customized mobile websites and applications."
        }
    ],
   
    "about": [
        {
            "icon":"1-sales.png",
            "title":"Sales",
            "description": "Sales by Root Cave CRM provides a complete and intuitive solution that can help salespeople be more productive so they can focus on what's most important—delivering amazing customer experiences."
        },

        {
            "icon":"2-cs.png",
            "title":"Service",
            "description": "Service by Root Cave CRM empowers customers through their choice of self and assisted service options; empowers agents to deliver fast, informed and effective resolutions; and seamlessly incorporates field solutions when there is a need for onsite help. Our agile solutions easily adapt to changing demands so that your business can deliver intent driven outcomes in a secure, flexible and reliable environment.."
        },

        {
            "icon":"3-marketing.png",
            "title":"Marketing",
            "description": "Root Cave Marketing is an integrated marketing resource management solution for marketing operation, planning, execution, and analytics across all channels—email, digital, social, SMS, and traditional."
        },

        {
            "icon":"4-financials.png",
            "title":"Finance",
            "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."
        },

        {
            "icon":"5-hr.png",
            "title":"Human Resources",
            "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."
        },

        {
            "icon":"6-ecommerce.png",
            "title":"Ecommerce",
            "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."
        },

        {
            "icon":"7-school.png",
            "title":"School",
            "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."
        },

        {
            "icon":"8-medical.png",
            "title":"Medical",
            "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."
        }
    ],

    "anytime": [
        {
            "icon":"box.png",
            "title":"Title Here",
            "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."
        },

        {
            "icon":"clock.png",
            "title":"Title Here",
            "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."
        },

        {
            "icon":"cloud.png",
            "title":"Title Here",
            "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."
        }
    ],

    "clients": [
        {
            "clinetLogo": "logoclient.png"
        },

        {
            "clinetLogo": "logoclient.png"
        },

        {
            "clinetLogo": "logoclient.png"
        },

        {
            "clinetLogo": "logoclient.png"
        },

        {
            "clinetLogo": "logoclient.png"
        },

        {
            "clinetLogo": "logoclient.png"
        }
    ],

    "lobProduct": [
        {
            "mockup": "1 (1).png",
            "id": 0,
            "tDesc": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.",
            "title": "Hello",
            "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.",
            "projectsdetails": [
                {
                    "mockup_details": "1 (1).png",
                    "description_details": "Hello 0 Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."

                },

                {
                    "mockup_details": "1 (2).png",
                    "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."

                },

                {
                    "mockup_details": "1 (3).png",
                    "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."

                },

                {
                    "mockup_details": "1 (4).png",
                    "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."

                }
            ]
        },

        {
            "mockup": "1 (1).png",
            "id": 1,
            "tDesc": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.",
            "title": "title here",
            "description": "hello ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.",
            "projectsdetails": [
                {
                    "mockup_details": "1 (1).png",
                    "description_details": "product 1 Hi  everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."

                },

                {
                    "mockup_details": "1 (2).png",
                    "description_details": "Hi 2 ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."

                },

                {
                    "mockup_details": "1 (3).png",
                    "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."

                },

                {
                    "mockup_details": "1 (4).png",
                    "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."

                }
            ]
        },

        {
            "mockup": "1 (1).png",
            "id": 2,
            "tDesc": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.",
            "title": "title here",
            "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.",
            "projectsdetails": [
                {
                    "mockup_details": "1 (1).png",
                    "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."

                },

                {
                    "mockup_details": "1 (2).png",
                    "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."

                },

                {
                    "mockup_details": "1 (3).png",
                    "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."

                },

                {
                    "mockup_details": "1 (4).png",
                    "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."

                }
            ]
        },

        {
            "mockup": "1 (1).png",
            "id": 3,
            "tDesc": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.",
            "title": "title here",
            "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.",
            "projectsdetails": [
                {
                    "mockup_details": "1 (1).png",
                    "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."

                },

                {
                    "mockup_details": "1 (2).png",
                    "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."

                },

                {
                    "mockup_details": "1 (3).png",
                    "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."

                },

                {
                    "mockup_details": "1 (4).png",
                    "description_details": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."

                }
            ]
        }
    ],


    "mobileProduct": [
        {
            "id": "1",
            "title": "Title Here",
            "mockup": "thumb-slider-portrait-3-opt-501x900.png",
            "description": "1111Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."
        },

        {
            "id": "1",
            "title": "Title Here",
            "mockup": "thumb-slider-portrait-3-opt-501x900.png",
            "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."
        },

        {
            "id": "1",
            "title": "Title Here",
            "mockup": "thumb-slider-portrait-3-opt-501x900.png",
            "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."
        },

        {
            "id": "1",
            "title": "Title Here",
            "mockup": "thumb-slider-portrait-3-opt-501x900.png",
            "description": "Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei."
        }
    ]

}
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

我假设您能够访问JSON对象的内容,并且您仍然坚持将其内容转换为对象。

int rowSum(int a[][], int row, int col) { if (row == a.length-1) return a[row][col]; if(col == a[row].length-1) return a[row][col]+rowSum(a,row+1,0); return a[row][col]+rowSum(a,row,col+1); } 将返回由JSON字符串表示的对象。它甚至会为你处理数组。

因此,如果您有一个包含JSON的字符串,只需在其上运行var parsed = JSON.parse(jsonstring);,它就会为您提供一个对象,您可以使用JSON.parse等。

答案 1 :(得分:0)

&lt; ====== ANGULAR CODDE ======&gt;

<section class="product-detail padding">
    <div class="container">
        <div class="row">
            <div class="col-md-6" data-ng-repeat="detail in Product">
                <div class="prdct-d">
                    <img class="img-responsive" src="<?php echo $img; ?>Computer/{{detial.mockup}}">
                    <p>
                        {{detail.description}}
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

&lt; ====== HTML CODDE ======&gt;

data-ng-repeat="detial in Product"

我改变了什么:这是data-ng-repeat="detail in Product"中的错字错误,我将其更改为"https://linkedin.com/in/" + id

谢谢&amp;干杯