AngularJS wählen Sie Bild aus der Liste

Bin ich um einfache Bilder-Liste.
hier ist mein code. Ich habe 2 Fragen:
1. Ich will nur eine einzige Wahl, wenn der Benutzer klicken Sie auf ein Bild. Immer wenn er ein Bild auswählen, es wird klar, dass die andere Wahl. wie kann ich das tun?
2. Anstelle der Grenze, die ich verwenden möchte um ein Symbol, z.B. fa-check (http://fontawesome.io/icon/check/). Wie kann ich kombinieren Sie es in der css?

Dank!

css-Datei

.selected {
   border:2px solid red;
}

js-Datei

$scope.items = [
    {imageUrl: '/app/img/item1.jpg'},
    {imageUrl: '/app/img/item2.jpg'}];

$scope.toggle = function (item) {
    item.selected = !item.selected;
  };

html-Datei

<div class="category rating-type">
<h5>items list</h5>
<div class="pics-continer">
    <ul>
        <li ng-repeat="item in items" ng-click="toggle(item)" ng-class="{'selected':item.selected}">
            <div style="background-image: url({{item.imageUrl}});height:36px; width:40px;display:inline-block"></div>
        </li>
    </ul>
</div>

  • Statt mit einem ausgewählten flag in jedes Element mit ein selectedItem Feld in den Bereich, und legen Sie es auf das angeklickte Element.
  • Dank JB ! Ich bin Neuling in AngularJS. Haben Sie ein gutes Beispiel oder Referenz, wo ich Folgen kann Ihre sugestion?
  • Siehe @Alborz Antwort
InformationsquelleAutor Dave Martin | 2014-01-04
  1. 1

    Ändern Sie Ihre taggle-Methode wie folgt, um ein einzelnes Bild auswählen-Liste.

        $scope.toggle = function (item) {
        $scope.selectedImage = item.imageUrl;
    };

    Und ändern Sie die Ansicht wie 

        <li ng-repeat="item in items" ng-click="toggle(item)" ng-class="{'selected':item.imageUrl == selectedImage}">
        <img src="{{item.imageUrl}}" style="height:36px; width:40px;"/>
    </li>

    Also nur ein Bild ausgewählt werden können, zur gleichen Zeit.

    Für die mit einem Symbol anstelle von border können Sie festlegen, dass das Symbol Hintergrundbild.
    der folgende link nützlich

    CSS background-position-Eigenschaft

    InformationsquelleAutor Alborz
  2. 1

    1. Ich denke, es ist am besten, so viel code wie möglich in die Steuerung - diese ist einfacher zu testen. Also: die html-snippet:

      <li ng-repeat="item in items" ng-click="selectItem(item)" 

    ng-class="{'fa fa-check':isSelected(item)}">

     <div style="background-image: url({{item.imageUrl}});
     height:36px; width:40px;display:inline-block"></div>
</li>

    controller:

    controller('TestController', function($scope){
   $scope.items = [
    {imageUrl: '/app/img/item1.jpg'},
    {imageUrl: '/app/img/item2.jpg'}
   ];
   $scope.selectedItem = null;

   $scope.selectItem = function(item){
    $scope.selectedItem = item;
   };

   $scope.isSelected = function(item){
    if($scope.selectedItem===null){
        return false;
    }
    return item.imageUrl === $scope.selectedItem.imageUrl;
   };
})
    1. wie setup-fontawesome ist hier dokumentiert: http://fontawesome.io/get-started/ Danach können Sie den css-Klassennamen zur Verfügung gestellt von fontawesome. Auch enthalten im Beispiel oben.
    • Super Antwort! Sie löste beide meine Probleme!
    • dann sollten Sie es akzeptieren, indem Sie auf das graue Kontrollkästchen auf der linken Seite der Antwort.
    InformationsquelleAutor michael
  3. 0
    $scope.items = [
    {imageUrl: '/app/img/item1.jpg'},
    {imageUrl: '/app/img/item2.jpg'}];

$scope.toggle = function (item) {
    item.selected = !item.selected;
  };

    dass item ist ein index für items, aber Sie hat nicht gesetzt selected in Ihrem items array . So item.selected es warf undefiniert Fehler

    Bitte versuchen Sie es auf diese Weise

    $scope.items = [
        {imageUrl: '/app/img/item1.jpg',selected:true},
        {imageUrl: '/app/img/item2.jpg',selected:false}];
    • Danke, für die Antwort!
    InformationsquelleAutor Ramesh Rajendran
Schreibe einen Kommentar