Невозможно понять, почему переменная не определена

Question

Невозможно понять, почему переменная не определена

0

Я новичок в AngularJS, поэтому я пытаюсь учиться, создавая POC. Мое требование - simple-

Пользователь добавляет данные и нажимает кнопку "Добавить контакт". Это добавляет контакт к массиву в контроллере. (Эта часть работает).
Этот добавленный контакт отображается в табличном формате, чуть ниже формы. (Это также работает).
В таблице, где отображаются контакты, я также хочу иметь кнопку удаления, которая удалит соответствующий контакт. (Проблема)

Ниже приведен html code-

<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 code-

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?
    }
}

Может кто-нибудь, пожалуйста, помогите мне определить, почему contactList не определено в removeContact?

Abhishek 23 янв. 2016, в 16:13

Источник

0

Эти типы ошибок означают, что this не то, что вы ожидаете, что означает, что removeContact не вызывается в вашем экземпляре myController1 , а в другом объекте
Paul S. 23 янв. 2016, в 15:14
0

Я получил это работает, если я явно передать ctrl.contactList в метод removeContact . Но почему это не работает без передачи, как addToContactList
Abhishek 23 янв. 2016, в 15:32

Теги:

javascript

angularjs

3 ответа

1

Сделал небольшие изменения в вашем коде. Я сделал это без использования "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/

Ashyboy 23 янв. 2016, в 13:56

0

Ваш точный код работает здесь! Попробуйте запустить его здесь.

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?
    }
}

<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>

P. Jairaj 23 янв. 2016, в 12:38

0

Любая идея, почему это не будет работать на моем местном?
Abhishek 23 янв. 2016, в 15:45
0

Я даже пытался запустить его на своем местном. Оно работает. Так должно быть и у тебя. Это единственный код в вашем файле? Остальная часть кода может быть причиной проблемы или некоторой синтаксической ошибки. Не знаю, только предположение. Попробуйте создать новый файл и просто добавьте эти фрагменты кода и посмотрите, работает ли он на вашем компьютере.
P. Jairaj 23 янв. 2016, в 16:27

Ещё вопросы

Эти типы ошибок означают, что this не то, что вы ожидаете, что означает, что removeContact не вызывается в вашем экземпляре myController1 , а в другом объекте
Я получил это работает, если я явно передать ctrl.contactList в метод removeContact . Но почему это не работает без передачи, как addToContactList
Любая идея, почему это не будет работать на моем местном?
Я даже пытался запустить его на своем местном. Оно работает. Так должно быть и у тебя. Это единственный код в вашем файле? Остальная часть кода может быть причиной проблемы или некоторой синтаксической ошибки. Не знаю, только предположение. Попробуйте создать новый файл и просто добавьте эти фрагменты кода и посмотрите, работает ли он на вашем компьютере.

Shomz · Accepted Answer · 2016-01-23T12-53-00.000Z

Это неправильный контекст - ваше внутреннее 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 
    }

Или:

    $scope.contactList = [];

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

    $scope.removeContact = function(idx) {
        $scope.contactList.splice(idx,1); // contactList is now defined as well
    }

Я попробовал это. Теперь, кажется, ничего не работает. Нужно ли мне менять мой HTML?
Нет, он должен работать только при смене контроллера. Не могли бы вы воссоздать проблему в плункере ?
Хм, здесь все в порядке: plnkr.co/edit/wPvJuaozy5ig0PKxMgBc?p=preview
Любая идея, почему это не будет работать на моем местном?
Единственное, что приходит мне в голову - это угловая версия, какую вы используете?
Здесь о плункере, последствия изменения this на $scope plnkr.co/edit/lIgTZOMijYZc37SiBCIG?p=preview
Хм, на самом деле не уверен, что не так на вашем локальном компьютере, вы видите, что оригинальный код работает как на plunker, так и в виде фрагмента кода.
Этот отправитель, который вы отправили, не работает, потому что он сочетает синтаксис «контроллер как ...» с $ scope. Это работает, когда я удалил контроллер как синтаксис: plnkr.co/edit/N1Hs0tnweSUL3Rh610SU?p=preview