Update-Teil der Seite auf klicken Sie mit angularjs

Ich bin neu in eckig. Falls dieser ein Duplikat ist, bitte einen link posten.

Ok, so dass ich in javascript habe ich eine Liste der Elemente, können sagen:

[{
    name: 'Bob',
    age: 24,
},
{
    name: 'Smith',
    age: 56,
},
{
    name: 'Lisa',
    age: 12,
}]

Alle name Eigenschaften sind ausgedruckt in einer Liste auf der linken Seite der Seite, wie diese:

<li data-ng-repeat="person in persons">{{tournament.name}}</li>

All dies funktioniert, aber hier ist das Ding.
Wenn ich auf eine person in der Liste, die ich anzeigen möchten nähere Informationen zu den rechts in der Liste über diese person.

Wenn ich auf Bob in der Liste angezeigt werden sollen, die sowohl name und age auf der rechten Seite der Liste.

Ich kann nicht dieses heraus in den Winkel. Kann mir jemand erklären, wie ich ein update für einen Teil der Seite mit Informationen?

  • Sie haben eine wirklich tolle tutorial das geht über die Grundlagen dieser & viele andere Themen.
InformationsquelleAutor ptf | 2013-09-24
  1. 5

    Können Sie dies mit einem einfachen Klick auf Ihre li so : 

    <ul data-ng-repeat="person in persons">
  <li ng-click="detail($index)">{{person.name}}</li>
</ul>

    Der $index ist der index der ng-repeat ist sehr nützlich, um Räude bei arrays !

    Fügen Sie ein div, wo Sie wollen, um zu sehen, die person, details : 

      <div>
    {{personDetail.name}} {{personDetail.age}} 
  </div>

    Im controller implementieren die detail-Funktion so : 

    var app = angular.module('MyApp', []);

app.controller('MyCtrl', function($scope){

  $scope.persons = [{
                       name: 'Bob',
                       age: 24,
                    },
                    {
                       name: 'Smith',
                       age: 56,
                    },
                    {
                       name: 'Lisa',
                       age: 12,
                    }];

  $scope.detail = function(index){
      $scope.personDetail = $scope.persons[index];
  };

});

    Und voila !

    arbeiten plnkr hier : http://plnkr.co/edit/Wg4UD6?p=preview

    • yep, weil Ihr nicht etwas besonderes, +1 für plunker
    InformationsquelleAutor Thomas Pons
  2. 3
    <!-- left -->
<li data-ng-repeat="person in persons" ng-click="obj.selected=$index">
    {{person.name}}
</li>

<!-- right -->
<div>
    {{persons[obj.selected]["name"]}}
    {{persons[obj.selected]["age"]}}
</div>

    Controller:

    $scope.obj = {
    selected:-1
};
    • es funktioniert, aber ich denke, dass es ein bisschen schwierig für ihn, wenn Sie sehen, seine Frage. Sie haben wahrscheinlich, um zu erklären, was ist der $ - index
    • Danke, aber ich weiß, index.
    InformationsquelleAutor AlwaysALearner
  3. 3

    HTML

     <li data-ng-repeat="person in persons" ng-click="clicked(person)">

    controller

     $scope.selectedNode = "";
 ...
 $scope.clicked = function(info) {
    $scope.selectedNode = info;
};

    erstellen Sie nun die Rechte Seite:

    <div>
  <pre>{{selectedNode | json}}</pre>
</div>
    • Es macht Spaß zu sehen, wie wir dasselbe tun können, in so viel verschiedene Arten
    InformationsquelleAutor Maxim Shoustin
Schreibe einen Kommentar