在 AngularJs 中显示元素

Show element in AngularJs

我的 angularjs 有问题,我试图通过在复选框中单击来显示元素,但它不起作用

我认为是 ng-model 的问题,但我不知道为什么

代码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>

第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
          }
        ]  
        })

p.s。真的不想用 jQuery 解决这个问题。

删除 ng-model 和 ng-show 周围的大括号,并使用另一个变量代替 id。也许像 product.show

在实际工作之前,您还需要做一些事情。

http://plnkr.co/edit/Il6pvUG4HlZMzRyyw0Ha

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

同时更改 ng-show

<div ng-show="product.show">