I've got an interesting problem (to me at least).
I'm on a project where we are getting data from an API and its nesting a set of objects in an array. We want to be able to display/edit them individually. The tricky part is getting to them from the view. Here's the setup using a similar but made up scenario.
User navigates to /profile/exploit/1
Ideally we grab that parameter and use it to filter the array. Here's the sample JS (without the param, I'm hardcoding the value for simplicity)
var app = angular.module('app',[]);
app.controller('AppCtrl', ['$scope',
function($scope) {
// The data is coming in from the API in a similar format.
// There is an array with objects in it, and we need
// display and/or edit those individual records
// This is a way simplified version of it
// (and nothing like the real data, haha)
$scope.profile = {
name: "Alexander",
location: "Earth",
exploits: [
{name: "Conquer Achaemenid empire", year: "334 BC", duration: 3},
{name: "Conquer the Balkans", year: "335 BC", duration: 4},
{name: "Conquer the Persian Empire", year: "334 BC", duration: 6}
],
}
// I planned to set this with a parameter /profile/exploits/1
e = 1;
}]);
And, here's the HTML
<html lang="en" ng-app="app">
<head>
<script data-require="[email protected]" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body>
<div ng-controller="AppCtrl">
Name: {{ profile.exploits[0].name }}<br/>
Year: {{ profile.exploits[0].year }}<br/>
Duration: {{ profile.exploits[0].duration }} months
</div>
</body>
</html>
What I'd like to do is something like: {{ profile.exploits[e].name }}
Where e sets the record in the array. But I can't for the life of me figure out how to make that happen. Seriously hoping it's something ridiculously simple.
I've got a mock of it here http://embed.plnkr.co/XhIlJt8BGCAkw70tRTgn/preview
