Question

我是AngularJS的初学者，所以我试图通过构建POC来学习。我的要求很简单 -

用户添加详细信息并点击＆＃34;添加联系人＆＃34;按钮。这会将联系人添加到控制器中的数组中。（这部分正在运作）。
此添加的联系人以表格格式显示，位于表单下方。（这也有效）。
在显示联系人的表格中，我还想要一个删除按钮，删除相应的联系人。（问题）

以下是html代码 -

<body ng-app="myApp" class='container'>
    <div ng-controller="Controller1 as ctrl">
        <h1>Contacts Manager</h1>
        <hr>
        <div class="panel panel-primary">
            <div class="panel-heading">Contact Editor</div>
            <div class="panel-body">
                <form role="form" >
                    <div class="form-group">
                        <label for="firstName">First Name</label>
                        <input type="text" name="firstName" class="form-control" placeholder="First Name" ng-model="contact.firstName"/>
                    </div>
                    <div class="form-group">
                        <label for="lastName">Last Name</label>
                        <input type="text" name="lastName" class="form-control" placeholder="Last Name" ng-model="contact.lastName"/>
                    </div>
                    <div class="form-group">
                        <label for="phoneNumber">Phone Number</label>
                        <input type="text" name="phoneNumber" class="form-control" placeholder="Phone Number" maxlength="10" ng-model="contact.phoneNumber"/>
                    </div>
                </form>
            </div>
            <div class="panel-footer">
                <input type="checkbox" name="disableAddRec" ng-model="disableAddRec"> <label for="disableAddRec">Disable Adding Contacts</label>
                <span class="pull-right"><button name="addContact" class="btn btn-primary" ng-disabled="disableAddRec" ng-click="ctrl.addToContactList()">Add Contact</button></span>
            </div>
        </div>

        <table class="table table-bordered table-hover" ng-if="ctrl.contactList.length > 0">
               <thead>
                   <tr><th>S. No.</th><th>First Name</th><th>Last Name</th><th>Phone Number</th><th>Action</th></tr>                       
               </thead>
               <tbody>
                   <tr ng-repeat="cntct in ctrl.contactList">
                       <td>{{$index+1}}</td><td>{{cntct.firstName}}</td><td>{{cntct.lastName}}</td><td>{{cntct.phoneNumber}}</td>
                       <td><button class="btn btn-danger" ng-click="ctrl.removeContact($index)">Remove</button></td>
                   </tr>
               </tbody>
        </table>
    </div>
</body>

以下是js代码 -

var myAppRef = angular.module("myApp", []);
myAppRef.controller("Controller1",['$scope', myController1]);
function myController1($scope) {

    this.contactList = [];

    this.addToContactList = function() {
        this.contactList.push($scope.contact);     
        $scope.contact = {};        
    }

    this.removeContact = function(idx) {
        this.contactList.splice(idx,1); // contactList is undefined here... why?
    }
}

有人可以帮我识别，为什么联系人列表在 removeContact 中未定义？

Answer 1

这是一个错误的背景 - 您的内部Base与您的外部this不同。使用this或存储对控制器上下文的引用。

例如：

$scope

或者：

    var self = this;
    self.contactList = [];

    self.addToContactList = function() {
        self.contactList.push($scope.contact);     
        $scope.contact = {};        
    }

    this.removeContact = function(idx) {
        self.contactList.splice(idx,1); // contactList is now defined 
    }

Answer 2

对您的代码稍作修改。我没有使用“Controller As”使其工作

<div ng-controller="Controller1">
  <h1>Contacts Manager</h1>
  <hr>
  <div class="panel panel-primary">
    <div class="panel-heading">Contact Editor</div>
    <div class="panel-body">
      <form role="form">
        <div class="form-group">
          <label for="firstName">First Name</label>
          <input type="text" name="firstName" class="form-control" placeholder="First Name" ng-model="contact.firstName" />
        </div>
        <div class="form-group">
          <label for="lastName">Last Name</label>
          <input type="text" name="lastName" class="form-control" placeholder="Last Name" ng-model="contact.lastName" />
        </div>
        <div class="form-group">
          <label for="phoneNumber">Phone Number</label>
          <input type="text" name="phoneNumber" class="form-control" placeholder="Phone Number" maxlength="10" ng-model="contact.phoneNumber" />
        </div>
      </form>
    </div>
    <div class="panel-footer">
      <input type="checkbox" name="disableAddRec" ng-model="disableAddRec">
      <label for="disableAddRec">Disable Adding Contacts</label>
      <span class="pull-right"><button name="addContact" class="btn btn-primary" ng-disabled="disableAddRec" ng-click="addToContactList()">Add Contact</button></span>
    </div>
  </div>

  <table class="table table-bordered table-hover" ng-if="contactList.length > 0">
    <thead>
      <tr>
        <th>S. No.</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Phone Number</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="cntct in contactList">
        <td>{{$index+1}}</td>
        <td>{{cntct.firstName}}</td>
        <td>{{cntct.lastName}}</td>
        <td>{{cntct.phoneNumber}}</td>
        <td>
          <button class="btn btn-danger" ng-click="removeContact($index)">Remove</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

JS代码：

var myAppRef = angular.module("myApp", []);
myAppRef.controller("Controller1", ['$scope', myController1]);

function myController1($scope) {

  $scope.contactList = [];

  $scope.addToContactList = function() {
    $scope.contactList.push($scope.contact);
    $scope.contact = {};
  }

  $scope.removeContact = function(idx) {
    $scope.contactList.splice(idx, 1); // contactList is undefined here... why?
  }
}

请检查这个小提琴。 https://jsfiddle.net/Ashyboy/vv8jt6sh/

Answer 3

您的确切代码在这里工作!!尝试在这里运行它。

＆＃13;

var myAppRef = angular.module("myApp", []);
myAppRef.controller("Controller1",['$scope', myController1]);
function myController1($scope) {

    this.contactList = [];

    this.addToContactList = function() {
        this.contactList.push($scope.contact);     
        $scope.contact = {};        
    }

    this.removeContact = function(idx) {
        this.contactList.splice(idx,1); // contactList is undefined here... why?
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" class='container'>
    <div ng-controller="Controller1 as ctrl">
        <h1>Contacts Manager</h1>
        <hr>
        <div class="panel panel-primary">
            <div class="panel-heading">Contact Editor</div>
            <div class="panel-body">
                <form role="form" >
                    <div class="form-group">
                        <label for="firstName">First Name</label>
                        <input type="text" name="firstName" class="form-control" placeholder="First Name" ng-model="contact.firstName"/>
                    </div>
                    <div class="form-group">
                        <label for="lastName">Last Name</label>
                        <input type="text" name="lastName" class="form-control" placeholder="Last Name" ng-model="contact.lastName"/>
                    </div>
                    <div class="form-group">
                        <label for="phoneNumber">Phone Number</label>
                        <input type="text" name="phoneNumber" class="form-control" placeholder="Phone Number" maxlength="10" ng-model="contact.phoneNumber"/>
                    </div>
                </form>
            </div>
            <div class="panel-footer">
                <input type="checkbox" name="disableAddRec" ng-model="disableAddRec"> <label for="disableAddRec">Disable Adding Contacts</label>
                <span class="pull-right"><button name="addContact" class="btn btn-primary" ng-disabled="disableAddRec" ng-click="ctrl.addToContactList()">Add Contact</button></span>
            </div>
        </div>

        <table class="table table-bordered table-hover" ng-if="ctrl.contactList.length > 0">
               <thead>
                   <tr><th>S. No.</th><th>First Name</th><th>Last Name</th><th>Phone Number</th><th>Action</th></tr>                       
               </thead>
               <tbody>
                   <tr ng-repeat="cntct in ctrl.contactList">
                       <td>{{$index+1}}</td><td>{{cntct.firstName}}</td><td>{{cntct.lastName}}</td><td>{{cntct.phoneNumber}}</td>
                       <td><button class="btn btn-danger" ng-click="ctrl.removeContact($index)">Remove</button></td>
                   </tr>
               </tbody>
        </table>
    </div>
</body>

＆＃13;

无法理解为什么变量未定义

3 个答案: