CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

webdesigner Praktikant

16. december 2014 - 10:11 Der er 6 kommentarer

AngularJS - specifik node i Json object baser på object ID

Hejsa

Har en Json service med data
jeg skriver ud i NG-repeat
I en Unsortede list .
Vil nu gerne have den markerede node over en and div da det er sub inddelt fra servicen ...

Eksempel....

var Personer = [{
"ID" : "1",
"Navn" : "Peter",
"Efter navn" : "Hansen",
"Adresse" : [
{
"By" : "Odense"
"Gade" : "Hc Andersens Vej"
"HusNr" : "32",
"PostNr" : "5000"
}
]
},
{
"ID" : "2",
"Navn" : "Louise",
"Efter navn" : "Nilsen",
"Adresse" : [
{
"By" : "Randers"
"Gade" : "Hæpringvej"
"HusNr" : "23",
"PostNr" : "8652"
}
]
}];

Personer er listet og adressen skal vises i en div når jeg trykker på Personen

Hvordan finder jeg Louises adresse når jeg klikker på hende?

Bruger som sagt en ng-repeat på Personen

HTML:
<div ng-repeat="Person in Personer" ng-click="Person($index)">
{{Person.Navn}} {{Person.efternavn}}
</div>

<div >
{{by}}
{{Gade}}
{{HusNr}}
{{PostNr}}
</div>

Synes godt om

olsensweb.dk Ekspert

16. december 2014 - 23:55 #1

er først lige started med at kigge på angular og prøved at lave deres tutorial
ud over det fandt jeg inspiration http://www.w3schools.com/angular/
så nedenstående code kan optemeres

du arbejder ud fra noget nær disse
http://www.w3schools.com/angular/angular_directives.asp
http://www.w3schools.com/angular/angular_sql.asp
og skal lave noget ala denne
http://www.w3schools.com/angular/angular_includes.asp

første forsøg til inspiration
html

     
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>demo</title>
        <style>
            table, th , td  {
                border: 1px solid grey;
                border-collapse: collapse;
                padding: 5px;
            }
            table tr:nth-child(odd)    {
                background-color: #f1f1f1;
            }
            table tr:nth-child(even) {
                background-color: #ffffff;
            }
        </style>
        <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
        <script src= "controllers.js"></script>
    </head>
    <body>
        <div data-ng-app="" data-ng-controller="customersController">
            <div>
                <table>
                    <tr data-ng-repeat="user in users">
                        <td> <button  data-ng-click="editUser(user.ID)">  Edit    </button> </td>
                        <td>{{ user.Navn}}</td>
                        <td>{{ user.Efternavn}}</td>
                    </tr>
                </table>
            </div>
            <div>
                {{ Navn}}
                {{Efternavn}}
                {{by}}
                {{Gade}}
                {{HusNr}}
                {{PostNr}}
            </div>
        </div>
    </body>
</html>

controllers.js


function customersController($scope) {
    var Personer = [
        {"ID": "1", "Navn": "Peter", "Efternavn": "Hansen", "Adresse": [{"By": "Odense", "Gade": "Hc Andersens Vej", "HusNr": "32", "PostNr": "5000"}]},
        {"ID": "2", "Navn": "Louise", "Efternavn": "Nilsen", "Adresse": [{"By": "Randers", "Gade": "Hæpringvej", "HusNr": "23", "PostNr": "8652"}]}];
    // indsat manglende komma efter bynavn og gade navn, og omdøbt "Efter navn" til Efternavn
    $scope.users = Personer;


    $scope.editUser = function (id) {
        $scope.edit = false;
        // $scope.Efternavn = $scope.users[id-1].Efternavn;
        var user_obj = $scope.users[id - 1]; // id=1 => index =0, id=2 => index =1, derfor trækkes der 1 fra
        $scope.Efternavn = user_obj.Efternavn;
        $scope.Navn = user_obj.Navn;
        $scope.by = user_obj.Adresse[0].By;
        $scope.Gade = user_obj.Adresse[0].Gade;
        $scope.HusNr = user_obj.Adresse[0].HusNr;
        $scope.PostNr = user_obj.Adresse[0].PostNr;
    };

}

Synes godt om

intenz Novice

26. december 2014 - 11:21 #2

Det er lidt omsonst at bruge ID'et til at slå brugeren op når du allerede bruger user objektet i loop (ID'et er heller ikke nødvendigvis det samme som dens index i array'et).

Ud fra ronols eksempel, kan du ændre:
data-ng-click="editUser(user.ID)"

til:
ng-click="editUser(user)"

Og $scope.editUser til:

$scope.editUser = function (user) {
$scope.edit = false;

$scope.Efternavn = user.Efternavn;
$scope.Navn = user.Navn;
$scope.by = user.Adresse[0].By;
$scope.Gade = user.Adresse[0].Gade;
$scope.HusNr = user.Adresse[0].HusNr;
$scope.PostNr = user.Adresse[0].PostNr;
};

Synes godt om

webdesigner Praktikant

10. februar 2015 - 15:31 #3

sweet taæ

Synes godt om

webdesigner Praktikant

10. februar 2015 - 16:01 #4

smid et svar :)

Synes godt om

olsensweb.dk Ekspert

12. februar 2015 - 13:47 #5

får du her

@intenz: smider du et svar også, du kom da med en klar forbedring

Synes godt om

Vijay Singh Praktikant

23. november 2018 - 08:10 #6

For those still reading this answer, if you are using ES6 the find method was added in arrays. So assuming the same collection, the solution be:

const foo = { "results": [
{
"id": 12,
"name": "Test"
},
{
"id": 2,
"name": "Beispiel"
},
{
"id": 3,
"name": "Sample"
}
] };
foo.results.find(item => item.id === 2)

I'd totally go for this solution now, as is less tied to angular or any other framework. Pure Javascript.

Angular solution (old solution)

I aimed to solve this problem by doing the following:

$filter('filter')(foo.results, {id: 1})[0];

A use case example:

app.controller('FooCtrl', ['$filter', function($filter) {
var foo = { "results": [
{
"id": 12,
"name": "Test"
},
{
"id": 2,
"name": "Beispiel"
},
{
"id": 3,
"name": "Sample"
}
] };

// We filter the array by id, the result is an array
// so we select the element 0

single_object = $filter('filter')(foo.results, function (d) {return d.id === 2;})[0];

// If you want to see the result, just check the log
console.log(single_object);
}]);

To learn: https://hackr.io/tutorials/learn-angular

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS

01/11

Test af Apple Watch Series 10: Apples jubilæums-model er blevet lidt af en mester af det hele

01/11

Google Clouds netop fratrådte topchef har fundet sit nye job: Bliver en af de mest magtfulde personer hos ServiceNow

01/11

Nu går OpenAI efter struben på Google: ChatGPT fungerer nu også som en AI-søgemaskine

01/11

Nørgaard: Agenterne kommer, og jeg er klar: Måske bliver min gamle drøm snart virkelighed

01/11

Staten vil selv udvikle kæmpe it-system til 650 millioner kroner: Nu tvinges regeringen til at lægge vigtige dokumenter frem

01/11

Det går fantastisk på det danske Dynamics-marked: NNIT-selskabet Scales kan vælge og vrage mellem opgaver

01/11

Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre

01/11

Skelsættende GDPR-sag ændrer definitionen af 'følsomme oplysninger'

01/11

Google indlemmer sin AI Gemini i Google Maps, Google Earth og Waze: Det kommer det til at betyde

01/11

Microsoft: Tvungen skift til Windows 11 kan udskydes med et år, hvis du betaler os 200 kroner

01/11

Sådan blev Margrethe Vestager ’Silicon Valleys største fjende’

Vis flere artikler

IT-JOB

Capgemini Danmark A/S

Salesforce Senior Technical Consultant

Unik System Design A/S

Ansvarlig UX’er med grafisk talent søges

Hemmersbach Denmark ApS

IT Fieldservice Tekniker

Rødovre Kommune

Skarp systemadministrator eller specialist i Microsoft 365

Koda

Bliv webudvikler i Koda og vær med til at skabe et stærkere musikliv

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I dag 06:10	Excel åbner fil i kæmpe format Af Aske i Excel
I går 22:00	Datafordeler Af Lsk i PHP
I går 12:37	Summere beløb pr. dato Af TTA i Excel
31/1022:44	Tilslutte chassic fans Af viking69 i PC
31/1020:28	LED lysstofrør Af ErikHg i Fri debat