Question

我有一个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>

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

P.S。真的不想在这个问题上使用jQuery。

Answer 1

删除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">

在AngularJs中显示元素

1 个答案: