我正在使用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顶部一样?