1. 首頁
  2. 問答
  3. 用ng-repeat選擇點擊項目的AngularJS問題

用ng-repeat選擇點擊項目的AngularJS問題

2017-04-25 63 views
0

我只想從我的ng-repeat聲明中刪除選定的項目以刪除。我只能通過ng-repeat獲得所有按鈕和所有名稱。有什麼辦法可以將點擊的項目名稱和點擊的項目按鈕刪除，而不是像圖片中的所有項目？用ng-repeat選擇點擊項目的AngularJS問題

enter image description here

的模態的標記是下面貼

<!doctype html> 
<html lang="en" ng-app="app"> 

    <head> 
    <meta charset="utf-8"> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Scope List</title> 

    <link rel="apple-touch-icon" href="apple-touch-icon.png"> 

    <!-- FONTS --> 
    <script src="https://use.edgefonts.net/vast-shadow:n4:all.js"></script> 
    <script src="https://use.edgefonts.net/vast-shadow:n4:all;megrim.js"></script> 
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"></link> 
    <!-- FONTS --> 

    <!-- CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" /> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.css" type="text/css" /> 

    <!-- Angular Material Dependencies --> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <link rel="stylesheet" href="styles/styles.css" type="text/css" /> 
    <!-- CSS --> 

    </head> 


    <body ng-controller="appCtrl as ctrl" ng-cloak> 
    <!--[if IE]> 
     <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
    <![endif]--> 
    <div class="parallax"> 
     <h2>{{title}}</h2> 
    </div> 


    <div class="wrapper"> 
     <div class="alert alert-success fade in alert-dismissable text-center" ng-if="alertMessageAdd"> 
      <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a> 
      <strong>{{item.name}} {{alertMessageAdd}}!</strong> 
     </div> 

     <div class="alert alert-warning fade in alert-dismissable text-center" ng-if="alertMessageUpdate"> 
      <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a> 
      <strong>{{value.name}} {{alertMessageUpdate}}!</strong> 
     </div> 

     <div class="alert alert-danger fade in alert-dismissable text-center" ng-if="alertMessageDelete"> 
      <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a> 
      <strong>{{clickedItem(value.name)}} {{alertMessageDelete}}!</strong> 
     </div> 

     <div class="bottom-row text-center"> 
      <span class="small"> Total :: </span><span class="emphasis large">{{DB.length}}</span> 
     </div> 
     <div class="top-row"> 
      <div class="pull-right"> 
       <span class="search"><i class="material-icons">search</i> <input type="text" ng-model="searchs" /> 
       <span ng-if="searchs.length === 0"><strong>No Results Found ...</strong></span> 
      </div> 

      <div class="btn-container"> 
      <md-button type="button" class="md-accent md-raised" data-toggle="modal" data-target="#Modal"> 
       <i class="material-icons">add_box</i> Add </md-button> 
      </div> 
     </div> 
    </div> 




    <!-- FIREBASE --> 
    <table class="table table-striped"> 
     <tr> 
      <thead> 
      <th>Photo</th> 
      <th>ID</th> 
      <th>Name</th> 
      <th>Size</th>    
      <th>Description</th> 
      <th>Exclusives</th> 
      <th>Price (USD)</th> 
      <th>Added</th> 
      <th>Edit/Delete</th> 
      </thead> 
     </tr> 
     <tbody> 
     <tr ng-repeat="value in DB | orderBy:sortType:sortReverse | filter:searchs"> 
      <td><a href="{{value.link}}" target="_blank"><img src="{{value.image}}" class="img-responsive" width="50" height="50"></a></td> 
      <td>{{value.id}}</td> 
      <td>{{value.name}}</td> 
      <td>{{value.size}}</td> 
      <td>{{value.description}}</td> 
      <td>{{value.exclusives.toString()}}</td> 
      <td>{{value.price | currency: '$'}}</td> 
      <td>{{CurrentDate | date: 'MM/dd/yyyy'}}</td> 
      <td> 
      <md-button class="md-raised md-primary" type="button" data-toggle="modal" data-target="#updateModal" ng-click="edit(value)"><i class="material-icons">mode_edit</i></md-button> 
      <!-- Delete Modal Popup --> 
      <md-button class="md-raised md-warn" type="button" data-toggle="modal" data-target="#deleteModal"><i class="material-icons">delete_forever</i></md-button> 

      <!--<md-button class="md-raised md-warn" type="button" ng-click="delete(value)"><i class="material-icons">delete_forever</i></md-button>--> 

      </td> 
     </tr> 

     </tbody> 
    </table> 
    <!-- FIREBASE --> 



    <!-- Modal Add Form --> 
    <div id="Modal" class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title">Add</h4> 
       </div> 
       <div class="modal-body"> 

        <form id="Form" name="Form" type="submit" ng-submit="add(value)" novalidate> 
         <md-content> 

         <md-input-container class="md-block"> 
          <label>ID</label> 
          <input required name="ID" type="number" ng-model="app.id"> 
          <div ng-messages="Form.ID.$error"> 
          <div ng-message="required"> ID is required.</div> 
          </div> 
         </md-input-container> 

         <md-input-container class="md-block"> 
          <label>Name</label> 
          <input required name="Name" ng-model="app.name"> 
          <div ng-messages="Form.Name.$error"> 
          <div ng-message="required"> name is required.</div> 
          </div> 
         </md-input-container> 

          <div layout="row"> 
          <div layout="column" flex="50"> 
         <md-input-container id="size" class="md-block"> 
          <label>Size</label> 
          <md-select name="Size" ng-model="app.size" required> 
           <md-option value='3"'>3"</md-option> 
           <md-option value='4.5"'>4.5"</md-option> 
           <md-option value='6"'>6"</md-option> 
           <md-option value='7.5"'>7.5"</md-option> 
           <md-option value='9.5"'>9.5"</md-option> 
           <md-option value='11"'>11"</md-option> 
           <md-option value='12"'>12"</md-option> 
          </md-select> 
          <div ng-messages="Form.Size.$error"> 
          <div ng-message="required"> size is required.</div> 
          </div> 
         </md-input-container> 
          </div> 
         <div layout="column" flex="50"> 
         <md-input-container> 
          <label>Price (USD)</label> 
          <input required name="Price" ng-model="app.price"> 
          <div ng-messages="Form.Price.$error"> 
          <div ng-message="required"> price is required.</div> 
          </div> 
         </md-input-container> 
         </div> 
         </div> 

         <div layout="column"> 
         <md-input-container class="md-block"> 
         <label>Description</label> 
         <input md-maxlength="200" required name="description" ng-model="app.description"> 
         <div ng-messages="Form.description.$error"> 
          <div ng-message="required"> description is required.</div> 
          <div ng-message="md-maxlength"> description must be less than 200 characters long.</div> 
         </div> 
         </md-input-container>  
         </div> 

          <md-input-container class="md-block"> 
          <label>Exclusives</label> 
          <md-select name="exclusives" multiple ng-model="app.exclusives" required> 
          <md-option value="Amazon">Amazon</md-option> 
          <md-option value="Claires">Claires</md-option> 
          <md-option value="Curly Dani">Curly Dani</md-option> 
          <md-option value="Enesco">Enesco</md-option>        
          <md-option value="Gund">Gund</md-option> 
          <md-option value="Hey Chickadee">Hey Chickadee</md-option> 
          <md-option value="It's Sugar">It's Sugar</md-option> 
          <md-option value="Macys">Macys</md-option> 
          <md-option value="New Egg">New Egg</md-option> 
          <md-option value="Not Available">Not Available</md-option> 
          </md-select> 
          <div ng-messages="Form.exclusives.$error"> 
          <div ng-message="required">Please pick at least one exclusive or N/A.</div> 
          </div> 
         </md-input-container> 

         <div layout="column"> 
         <md-input-container> 
          <label>Item Link</label> 
          <input required name="Link" ng-model="app.link"> 
          <div ng-messages="Form.Link.$error"> 
          <div ng-message="required"> item link is required.</div> 
          </div> 
         </md-input-container> 
         </div>  

         <div layout="column"> 
         <md-input-container> 
          <label>Item Image Link</label> 
          <input required name="image" ng-model="app.image"> 
          <div ng-messages="Form.image.$error"> 
          <div ng-message="required"> image link is required.</div> 
          </div> 
         </md-input-container> 
         </div>  


        </form> 
        </md-content> 
      </div> 

      <div class="modal-footer"> 
       <div class="form-group"> 
       <div class="pull-left" layout="row" layout-align="end center"> 

      <md-button class="md-primary md-raised" type="button" data-toggle="modal" data-target="#Modal" ng-disabled="Form.$invalid" ng-click="add(value)"><md-icon class="material-icons ng-scope">add_box</md-icon> Add</md-button> 

       </div> 

       <div class="pull-right"> 
        <md-button type="button" class="md-accent md-raised" data-dismiss="modal"><md-icon class="material-icons">close</md-icon> Close</md-button> 
       </div> 
       </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- Modal Add Form --> 



    <!-- Modal Update Form --> 
    <div id="updateModal" class="modal fade out"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title">Update a </h4> 
       </div> 
       <div class="modal-body"> 

        <form name="UpdateForm" ng-submit="save(value)" novalidate> 
         <md-content> 

         <md-input-container class="md-block"> 
          <label>ID</label> 
          <input required name="ID" type="number" ng-model="app.id"> 
          <div ng-messages="UpdateForm.ID.$error"> 
          <div ng-message="required"> ID is required.</div> 
          </div> 
         </md-input-container> 

         <md-input-container class="md-block"> 
          <label>Name</label> 
          <input required name="Name" ng-model="app.name"> 
          <div ng-messages="UpdateForm.Name.$error"> 
          <div ng-message="required"> name is required.</div> 
          </div> 
         </md-input-container> 

          <div layout="row"> 
          <div layout="column" flex="50"> 
         <md-input-container class="md-block"> 
          <label>Size</label> 
          <md-select name="Size" ng-model="app.size" required> 
          <md-option value='3"'>3"</md-option> 
          <md-option value='4.5"'>4.5"</md-option> 
          <md-option value='6"'>6"</md-option> 
          <md-option value='7.5"'>7.5"</md-option> 
          <md-option value='9.5"'>9.5"</md-option> 
          <md-option value='11"'>11"</md-option> 
          <md-option value='12"'>12"</md-option> 
          </md-select> 
          <div ng-messages="UpdateForm.Size.$error"> 
          <div ng-message="required"> size is required.</div> 
          </div> 
         </md-input-container> 
          </div> 
         <div layout="column" flex="50"> 
         <md-input-container> 
          <label>Price (USD)</label> 
          <input required name="Price" ng-model="app.price"> 
          <div ng-messages="UpdateForm.Price.$error"> 
          <div ng-message="required"> price is required.</div> 
          </div> 
         </md-input-container> 
         </div> 
         </div> 

         <div layout="column"> 
         <md-input-container class="md-block"> 
         <label>Description</label> 
         <input md-maxlength="200" required name="description" ng-model="app.description"> 
         <div ng-messages="UpdateForm.description.$error"> 
          <div ng-message="required"> description is required.</div> 
          <div ng-message="md-maxlength"> description must be less than 200 characters long.</div> 
         </div> 
         </md-input-container>  
         </div> 

          <md-input-container class="md-block"> 
          <label>Exclusives</label> 
          <md-select name="exclusives" multiple ng-model="app.exclusives" required> 
          <md-option value="Amazon">Amazon</md-option> 
          <md-option value="Claires">Claires</md-option> 
          <md-option value="Curly Dani">Curly Dani</md-option> 
          <md-option value="Enesco">Enesco</md-option>        
          <md-option value="Gund">Gund</md-option> 
          <md-option value="Hey Chickadee">Hey Chickadee</md-option> 
          <md-option value="It's Sugar">It's Sugar</md-option> 
          <md-option value="Macys">Macys</md-option> 
          <md-option value="New Egg">New Egg</md-option> 
          <md-option value="Not Available">Not Available</md-option> 
          </md-select> 
          <div ng-messages="UpdateForm.exclusives.$error"> 
          <div ng-message="required">Please pick at least one exclusive or N/A.</div> 
          </div> 
         </md-input-container> 

         <div layout="column"> 
         <md-input-container> 
          <label>Item Link</label> 
          <input required name="Link" ng-model="app.link"> 
          <div ng-messages="UpdateForm.Link.$error"> 
          <div ng-message="required"> item link is required.</div> 
          </div> 
         </md-input-container> 
         </div>  

         <div layout="column"> 
         <md-input-container> 
          <label>Item Image Link</label> 
          <input required name="image" ng-model="app.image"> 
          <div ng-messages="UpdateForm.image.$error"> 
          <div ng-message="required"> image link is required.</div> 
          </div> 
         </md-input-container> 
         </div>  


        </form> 
        </md-content> 
      </div> 

      <div class="modal-footer"> 
       <div class="form-group"> 
       <div class="pull-left" layout="row" layout-align="end center"> 


      <md-button class="md-warn md-raised" type="button" data-dismiss="modal" ng-click="save(value)"><md-icon class="ng-scope material-icons">save</md-icon> Save</md-button> 

       </div> 

       <div class="pull-right"> 
        <md-button type="button" class="md-accent md-raised" data-dismiss="modal"><md-icon class="material-icons">close</md-icon> Close</md-button> 
       </div> 
       </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- Modal Update Form --> 


    <!-- Modal Yes/No --> 
    <div id="deleteModal" class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Delete ?</h4> 
      </div> 


      <div class="modal-body"> 

       <h4 class="text-center" ng-repeat="value in DB">Are you sure you want to delete <strong><em>{{value.name}}</em></strong>?</h4> 

      </div> 


       <div class="modal-footer"> 
        <div layout="row" layout-align="end center"> 

         <md-button class="md-warn md-raised pull-left" type="button" data-toggle="modal" ng-repeat="value in DB" ng-click="delete(value)" data-dismiss="modal"><md-icon class="ng-scope material-icons">delete_forever</md-icon> Yes</md-button> 

         <md-button type="button" class="md-raised md-primary pull-right" data-dismiss="modal"><i class="material-icons">not_interested</i> No</md-button> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- Modal Yes/No --> 


    <!-- JS --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="vendor/parallax/jquery.parallax.js"></script> 
    <script src="vendor/parallax/parallax.js"></script> 

    <!-- AngularJS Material Dependencies --> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> 
    <script src="https://code.angularjs.org/1.3.9/angular-animate.js"></script> 
    <script src="https://code.angularjs.org/1.3.9/angular-aria.js"></script> 
    <script src="https://code.angularjs.org/1.3.9/angular-messages.js"></script> 
    <script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script> 
    <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script> 
    <!-- Firebase --> 

    <!-- APP JS --> 
    <script type="text/javascript" src="js/appCtrl.js"></script> 
    <!-- APP JS --> 
    <!-- JS --> 

    </body> 
</html>

和控制器代碼是在這裏

angular.module('app', ['firebase', 'ngMaterial', 'ngMessages']) 
.controller('appCtrl', function($scope, $firebase) 
{ 
/* Firebase Database Connect */ 
var ref = new Firebase("https://app.firebaseio.com/"); 
var sync = $firebase(ref); 

$scope.DB = sync.$asArray(); 

/* Page Title */ 
$scope.title='Scope List';  


/* CRUD Labels for Events */ 
$scope.selectItem = function(item) { 
    console.log(item); 
    $scope.clickedItem = item; 
} 


/* Date Added (Need to change to time submitted not current time) */ 
$scope.CurrentDate = new Date(); 

/* CRUD Functionality */ 
$scope.app={id:'',name:'',size:'',description:'',exclusives:'',price:'',status:'',link:'',image:'',added:''} 

/* Add Item */ 
$scope.add=function(){ 
    $scope.alertMessageAdd = ""; 

    $scope.DB.$add($scope.app); 
    $scope.app={id:'',name:'',size:'',description:'',exclusives:'',price:'',status:'',link:'',image:'',added:''} 
    $scope.alertMessageAdd = "New item added successfully!"; 


    /* Add Form Validation */ 
    $scope.Form.Name.$error = { 
    "required": true 
    } 

    $scope.Form.ID.$error = { 
    "required": true 
    } 

    $scope.Form.Size.$error = { 
    "required": true 
    } 

    $scope.Form.Price.$error = { 
    "required": true 
    } 

    $scope.Form.description.$error = { 
    "required": true 
    } 

    $scope.Form.exclusives.$error = { 
    "required": true 
    } 

    $scope.Form.Link.$error = { 
    "required": true 
    } 

    $scope.Form.image.$error = { 
    "required": true 
    } 

    $scope.Form.ID = ''; 
    $scope.Form.Size = ''; 
    $scope.Form.Price = ''; 
    $scope.Form.description = ''; 
    $scope.Form.exclusives = ''; 
    $scope.Form.Link = ''; 
    $scope.Form.image = ''; 


    // reset form and disable error messages 
    $scope.Form.$setPristine(); 
    $scope.Form.$setUntouched(); 
    angular.element(document.querySelector('#Modal')).modal('hide'); 
} 


/* Save Item */ 
$scope.save=function(){ 
    $scope.alertMessageUpdate = ""; 

    $scope.DB.$save($scope.app); 
    $scope.app={id:'',name:'',size:'',description:'',exclusives:'',price:'',status:'',link:'',image:'',added:''} 

    $scope.alertMessageUpdate = "item updated successfully!"; 
} 


/* Edit Item */ 
$scope.edit=function(value){ 
    $scope.app=value 
} 


/* Delete Item */ 
$scope.delete=function(item){ 
    $scope.alertMessageDelete = ""; 

    $scope.DB.$remove(item) 
    $scope.alertMessageDelete = "item deleted successfully!"; 
} 

/* Size Dropdown */ 
$scope.size=['3\"','4.5\"','6\"','7.5\"','9.5\"','11\"','"12\"'] 

/* Exclusives Multi Select */ 
$scope.exclusives=["Amazon","Claires","Curly Dani","Gund","Hey Chickadee","It\'s Sugar","Macys","New Egg","Not Available"] 

});

來源

2017-04-25 Rick

回答

0

免責聲明：我不知道你使用的是firebase事。然而，你的意圖在你的角碼中應該是直截了當的。 從你的ng-重複segment in html, You should place a刪除功能和 傳遞當前迭代器的引用。就像：

<div ng-repeat= "value in DB"> 
    <div>{{value}}></div><button ng-click="delete(value)"></button> 
</div>

你還沒有分享你的中繼代碼，所以這只是我對刪除功能的猜測。但是這樣你得到一個特定的實例，然後你可以用它來提醒你的消息。

希望這會有所幫助。如果事情還沒有解決，請分享您的轉發器代碼。

爲OP進一步解釋說：

你有這個按鈕上打開你的模型：

<md-button class="md-raised md-warn" type="button" data-toggle="modal" data-target="#deleteModal"><i class="material-icons">delete_forever</i></md-button>

然後你有這樣的中繼器在你刪除模式：

<div class="modal-body"> 

       <h4 class="text-center" ng-repeat="value in DB">Are you sure you want to delete <strong><em>{{value.name}}</em></strong>?</h4> 

      </div>

問題是你正在使用ng-repeat="value in DB"重複數據庫中的所有值。你不應該這樣做，而應該從你的按鈕中取出點擊值。要拉這個，你可以在你的md-button上放置一個click聽衆。像：

<md-button class="md-raised md-warn" type="button" data-toggle="modal" data-target="#deleteModal" ng-click="getValueToDelete(value)"><i class="material-icons">delete_forever</i></md-button>

此函數獲取值，您可以將它存儲在您的作用域中的某個位置。在這種情況下，我正在使用rootScope，但您應該嘗試做其他事情。

而在你的模態中，你應該只使用這個值而不是ng-repeat = value in DB。例如：

<div class="modal-body"> 

       <h4 class="text-center">Are you sure you want to delete <strong><em>{{valueToDelete.name}}</em></strong>?</h4> 

      </div>

這樣你只能得到一個模態值。希望現在看起來有用。

來源

2017-04-26 05:50:18

+0

嗨， 我會完整的標記，但我正在尋找一種方法只發布點擊項目的名稱和刪除按鈕。因爲它的佈局是這樣的 刪除表中的按鈕打開刪除模式與是或否，如果你點擊是它永久刪除。我只能讓它顯示所有數據庫條目的按鈕和名稱，但我只需要點擊的項目。有什麼方法我只能針對點擊的項目名稱和點擊項目按鈕？提前致謝。 – Rick

+0

我更新了我的答案以解釋事情。再看看 –

+0

這解決了我的問題。非常感謝！！！ – Rick

相關問題

 相關問題