使用ng-repeat我需要在特定按钮内添加3个字段

时间:2018-10-09 04:22:32

标签: angularjs angular-ui-router angularjs-ng-repeat ng-modules

请查看代码段,我需要在“评论的点击”按钮上添加3个字段。像一个文本字段,一个电子邮件字段和一个提交按钮一样。现在,onClick的评论中,我正在调用一些文本数据,但要删除该文本数据并添加这三个字段。

var app = angular.module("MyApplication", []);
app.controller("MyController", function ($scope) {
  $scope.BookClicked = {};
  
	$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 (Book) {
  	$scope.BookClicked = Book;
    Book.output = Book.Description;
  }
  $scope.Getaddtocart = function (Book) {
    $scope.BookClicked = Book;
    Book.output = Book.Addtocart;
  }
  $scope.GetSpecification = function (Book) {
    $scope.BookClicked = Book;
    Book.output = Book.Specifications.NoofPages + Book.Specifications.BookType;
  }
  $scope.GetReviews = function (Book) {
    $scope.BookClicked = Book;
    Book.output = Book['Reviews'][0].Ratethebook + Book['Reviews'][0].ShortReview + Book['Reviews'][0].EmailId;
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>

<body ng-app="MyApplication">
    <div ng-controller="MyController">
      <div data-ng-repeat="Book in BookDetails">
        <h1>{{Book.Name}}</h1>
                
        <button data-ng-click="GetDescrp(Book);">Description</button>
        <button data-ng-click="GetSpecification(Book);">Specifications</button>
        <button data-ng-click="GetReviews(Book);">Reviews</button>
        <button data-ng-click="Getaddtocart(Book);">Add To Cart</button>
        
        <div ng-show="Book === BookClicked" style="background:yellow">
          <hr>
          <b>Output</b>: {{Book.output}}
          <hr>
        </div>
        
      </div>
    </div>
</body>

0 个答案:

没有答案