2015-01-07 3 views
0

у меня есть проблемы с angularjs, я пытаюсь показать элемент щелчка в флажке, но он не работаетПоказать элемент в AngularJs

я думаю, что проблема в нг-модели, но я не знаю, почему

Код HTML: index.html

<body ng-app="MetaStore"> 
    <div ng-controller="produContr" > 
       <div ng-repeat="product in products" > 
        <h3> {{product.name}} </h3> 
        <p><strong>Prix : </strong> {{product.prix}} DH</p> 
        <p> 
        <span> 
         Acheter &nbsp; <input type="checkbox" ng-model="{{product.id}}" > 
        </span> 
        </p><hr> 
       </div> 
      </div> 

       <div><h3>Liste des produits selectionnees</h3> 
       <div class="row"> 

        <div ng-repeat="product in products"> 
         <div ng-show="{{product.id}}"> 
          <h3> {{product.name}} </h3> 
          <p><strong>Prix : </strong> {{product.prix}} DH</p> 
          <hr> 
         </div> 

        </div> 

       </div> 

      </div> 
     </div> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="js/app.js"></script> 
</body> 

Page app.js

var app = angular.module('MetaStore',[]); 
app.controller('produContr', function($scope){ 

    $scope.products = [ 
      { 
      "id": 0, 
      "name": "Boyle", 
      "prix": 3941 
      }, 
      { 
      "id": 1, 
      "name": "Pearson", 
      "prix": 3235 
      }, 
      { 
      "id": 2, 
      "name": "Burnett", 
      "prix": 2286 
      } 
     ] 
     }) 

пс действительно не хочу использовать jQuery для этой проблемы.

ответ

0

Удалите фигурные скобки вокруг вашей ng-модели и ng-show, а также используйте другую переменную вместо id. Может быть, что-то вроде product.show

Есть также несколько вещей, которые вам нужно сделать, прежде чем он действительно сможет работать.

http://plnkr.co/edit/Il6pvUG4HlZMzRyyw0Ha

<input type="checkbox" ng-model="product.show" > 

изменить также нг-шоу

<div ng-show="product.show"> 
Смежные вопросы