Question

我只想从我的ng-repeat语句中删除所选项目。我只能通过ng-repeat获取所有按钮和所有名称。有没有什么方法可以拉出点击的项目名称和点击的项目按钮来删除而不是像照片中那样删除它们？

模态的标记发布在

下面

<!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"]

});

Answer 1

免责声明：我不知道您使用的是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"重复数据库中的所有值。你不应该这样做，而应该从你的按钮中拉出点击的值。为此，您可以在click上放置md-button听众。像：

  <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，但你应该尝试做其他事情。

$scope.getValueToDelete = function(value){
   $rootScope.valueToDelete = value
}

在你的模态中，你应该只使用这个值而不是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>

这样，您的模态中只能获得一个值。希望它现在看起来很有用。

使用ng-repeat选择单击项目的AngularJS问题

1 个答案: