AngularJs On点击部分更改

时间:2015-09-12 22:46:27

标签: javascript html arrays angularjs

我正在使用AngularJs并试图这样做,当我点击屏幕某个部分的某个对象时,屏幕的另一部分将会改变,并包含特定于最初点击的那个数组的信息。在我的HTML中,我实现了这一点但我希望能够访问我的数组中的数组中的内容。

这是我的HTML:

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div id="rightSection">
    <form>
        <div class="btn-group"> <a class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="#">Submit Idea</a></div>
    </form>
    <div id="list2"  class="list-group">
        <div id="generalInfo">
            <d2 id="productViewerTitle">{{productViewer.title}}</d2>
            <br/>
            <p id="productViewerRating" class="glyphicon glyphicon-chevron-up">{{productViewer.rating}}</p>
            <p id="productViewerUsers">{{productViewer.users}}<span class="glyphicon glyphicon-user"></span></p>
            <br/>
            <p id="productViewerLanguage">{{productViewer.tool}}</p>
            <br/>
            <div id="bigImageHolder"><img id="productViewerImage" src={{productViewer.image}} alt=""/></div>
            <br/>
        </div>
        <div id="longDescriptionSection">
            <p id="productViewerDescription">{{productViewer.description}}</p>
        </div>
        <div id="jobListings">
            <div id="jobTitle">
                <p id="availableJobsTitle">Available Jobs</p>
            </div>
            <div>
                <div id="jobsContainer" ng-repeat="product in products">
                    <div id="jobHolder" ng-repeat="job in product.jobs">
                        <p id="jobName">{{productViewer.title}}</p>
                        <p id="jobPay">{{job.pay}}</p>
                        <p id="jobDifficulty">Difficutly: {{job.difficulty}}</p>
                        <p id="jobCredential" class="glyphicon glyphicon-plus-sign">{{job.credential}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

这是我的JavaScript:

.controller("projectFinderPage", function($scope) {

        $scope.relevance = '-rating';
        $scope.tools = '-tool';
        $scope.topic = '-topic';
        $scope.info = function(product) {
            $scope.productViewer = product;
        };
        $scope.jobListings = function(product) {
            $scope.jobViewer = product;
        };

        $scope.products = [
                {title:'Proper Plants Website Redesign',
                image:'http://www.interactive-biology.com/wp-content/uploads/2012/07/Pea-Plant11.jpg',
                description:'Help redesign the layout of Proper Plants based in Kentucky!',
                tool:'HTML/CSS/JAVASCRIPT',
                users:321,
                rating:100,
                topic:"TECHNOLOGY",
                jobs:[
                    {name: 'Backend Engineering', difficulty: 'Hard', credential: 'Knowledge of SQL backend logging', pay: '1000'},
                    {name: 'Object Color Correction', difficulty: 'Easy', credential: 'Ability to normalize color ranges', pay: '50'},
                    {name: 'AngularJs Implementation', difficulty: 'Medium', credential: 'Understanding of ngRepeat and ngSort', pay: '100'},
                    {name: 'Advertisement', difficulty: 'Easy', credential: 'Ability to effectively market to 100+', pay: '150'},
                    {name: 'Title UI Redesign', difficulty: 'Easy', credential: 'Can make a functional logo redesign', pay: '50'},
                    {name: 'SQL System Management', difficulty: 'Very Hard', credential: "Ability to maintain a parsed server", pay: '1500'},
                    {name: 'Facebook Page Management', difficulty: 'Very Easy', credentials: 'Basic social skills', pay: '25/w'},
                    {name: 'Competitor Market Research', difficulty: 'Medium', credentials: 'Marketing Degree', pay:'120'},
                    {name: "TESTING TESTING", difficulty: "Medium", credentials: "None", pay:"10"}]},
            {title:'Tiper Logo Redesign', image:'http://site.xavier.edu/polt/typewriters/underwood5small.jpg', description:'Be a part of the team making the new Tiper logo!', tool:'PHOTOSHOP', users:3, rating:13, topic:"TECHNOLOGY",
                jobs: [{name: 'Backend Engineering', difficulty: 'Hard', credential: 'Knowledge of SQL backend logging', pay: '1000'},
                    {name: 'TEST', difficulty: 'Easy', credential: 'Ability to normalize color ranges', pay: '50'},
                    {name: 'AngularJs Implementation', difficulty: 'Medium', credential: 'Understanding of ngRepeat and ngSort', pay: '100'},
                    {name: 'Advertisement', difficulty: 'Easy', credential: 'Ability to effectively market to 100+', pay: '150'},
                    {name: 'Title UI Redesign', difficulty: 'Easy', credential: 'Can make a functional logo redesign', pay: '50'},
                    {name: 'SQL System Management', difficulty: 'Very Hard', credential: "Ability to maintain a parsed server", pay: '1500'},
                    {name: 'Facebook Page Management', difficulty: 'Very Easy', credentials: 'Basic social skills', pay: '25/w'},
                    {name: 'Competitor Market Research', difficulty: 'Medium', credentials: 'Marketing Degree', pay:'120'}]},
            {title:'Random Project', image:'http://i.kinja-img.com/gawker-media/image/upload/zxpvsmndjrroklechbz4.gif', description:'This is some random proejct.', tool:'C++', users:233, rating: 17},
            {title:'Vent Design Logo', image:'https://m2.behance.net/rendition/pm/17643109/disp/b2b102b8772bb0cefd73e957ce73382b.png', description:'Help us with our company logo.', tool:'PHOTOSHOP', users:6, rating:34},
            {title:'Neopets Reloaded', image:'http://s.hswstatic.com/gif/neopets-6.jpg', description:'Be apart of the team working on the next big thing in Neopets!', tool:'HTML/CSS/JAVASCRIPT', users:444, rating:1113},
            {title:'New York Times Website', image:'http://static1.squarespace.com/static/5399cc0ae4b0705199b37aa3/5399e8a2e4b0f44ec1b1e21e/545a0216e4b05115df2de008/1429793622682/?format=1500w', description:'Help us redesign the New York Times Website', tool:'PHOTOSHOP', users:13, rating:243},
            {title:'Animal Counting Algorithm', image:'http://phoenixzoo.org/wordpress/wp-content/galleries/animals-gallery-2/phoenix-zoo-animals-17.jpg', description:'We need a complex algorithm to count our animals!', tool:'C++', users:8, rating:93},
            {title:'Racing Videogame (Racers 2)', image:'http://coolcarswallpaper.com/wp-content/uploads/2012/02/32-aston-martin-v12-zagato-racecar-red-white-car-1080x1920.jpg', description:'Time to buld a racing videogame for PC and Mac!', tool:'C#', users:39, rating:63},
            {title:'Trash Location App', image:'http://www.ozarkalabama.org/ozark/Portals/0/trash-symbol.jpg', description:'We are making an app to help garbage men locate trash!', tool:'C#', users:5, rating:27}
        ];

        $scope.productViewer = '';
        $scope.jobViewer = '';

    })

基本上我如何在我的作业数组(产品数组中的数组)中显示数据,就像我在HTML顶部一样?

0 个答案:

没有答案