如何将数据从ng-repeat绑定到按钮的onclick

时间:2018-10-03 08:21:39

标签: angularjs angularjs-ng-repeat

在AngularJS中,我有2个数组参数,这些参数已使用ng-repeat在HTML中绑定。现在,我必须调用按钮的数据onclick。我的代码是这样的:

HTML

    <div data-ng-repeat="Book in BookDetails">
        <h1>{{Book.Name}}</h1>
        <p><img src="{{Book.Image}}"></p>
        <h5>{{Book.Description}}</h5>
        <h5>{{Book.Specifications.NoofPages}}</h5>
        <h5>{{Book.Specifications.BookType}}</h5>
        <h5>{{Book['Reviews'][0].Ratethebook}}</h5>
        <h5>{{Book['Reviews'][0].ShortReview}}</h5>
        <h5>{{Book['Reviews'][0].EmailId}}</h5>
        <h5>{{Book.Addtocart}}</h5>
        <button data-ng-click="GetDescrp(Book.Description);">Description</button>
        <button data-ng-click="GetSpecification(Book.Specifications.NoofPages + Book.Specifications.BookType);">Specifications</button>
        <button data-ng-click="GetReviews(Book['Reviews'][0].Ratethebook + Book['Reviews'][0].ShortReview + Book['Reviews'][0].EmailId);">Reviews</button>
        <button data-ng-click="Getaddtocart(Book.Addtocart);">Add To Cart</button>
    </div>

JavaScript

var app = angular.module("MyApplication", []);
    app.controller("MyController", function ($scope) {

        $scope.BookDetails = [
            {
                Name: "Star Wars",
                Image: "Images/pic.png",
                Description: "The process of designing, writing, testing, debugging.",
                Specifications: { NoofPages: "80", BookType: "Paper book" },
                Reviews: [{ Ratethebook: "gdgdg", ShortReview: " vc", EmailId: " gf" }],
                Addtocart: "Under Maintainece"
            },
            {
                Name: "Coading Book",
                Image: "Images/pic2.png",
                Description: "Programming is to find a sequence of instructions that will automate.",
                Specifications: { NoofPages: "180", BookType: "HardBound" },
                Reviews: [{ Ratethebook: "gdgdg", ShortReview: "hg ", EmailId: " uy" }],
                Addtocart: "Under Maintainece1"
            }];
        $scope.GetDescrp = function (BookDescription) {
            alert(BookDescription);

        }
        $scope.Getaddtocart = function (Addtocart) {
            alert(Addtocart);

        }
        $scope.GetSpecification = function (BasicSpecifications) {
            alert(BasicSpecifications);

        }
        $scope.GetReviews = function (BasicReviews) {
            alert(BasicReviews);

        }

    });
</script>

0 个答案:

没有答案