ng-clickまたはng-changeは配列を保存しません

Question

私は新しいオークション形式を持っています。ユーザーは、要求されたすべてのフィールドを挿入し、ボタンをクリックする必要があります。「Invite People」は、他の保存されたユーザーを招待することも、電子メールで人を招待することもできます。電子メールの部分は正常に動作します。しかし、ユーザーの部分は私にいくつかの問題を与える。

HTML部分：

  <div ng-show="showBid" class="panel panel-default" ng-controller="NewAuctionController"> 
<div class="panel-heading">Invite Members</div> 
<div class="panel-body"> 
    <ul class="list-group" ng-repeat="user in users"> 
     <li class="col-md-4" id="userlist" ng-hide="user.name == profile"> 
      <img ng-src="{{user.img}}" class="userImage"> 
      <div class="username"> {{user.name}}</div> 
      <div class="userrole"> {{user.role}} </div> 
      <div class="usercompany">{{user.company}}</div> 
      <input type="checkbox" ng-model="user.isChecked" ng-click="insertinvited(user)"> 

</li> 
</ul> 

私はNG-変化にもしようとした上記の部分が、それは同じです。 insertinvitedは（）です：コンソールで

   $scope.invitations=[]; 

$scope.insertinvited= function (user) { 

    if(user.isChecked) { 
     $scope.invitations.push(user.name); 
    } else { 
     var toDel = $scope.invitations.indexOf(user.name); 
     $scope.invitations.splice(toDel,1); 
    } 
    console.log($scope.invitations); 

}; 

この作品、私はボックスをチェックしたときに起こす配列は

正しくプッシュしかし、私はここでその配列を使用しようとするとされています

<div ng-show="showBid" class="panel panel-default" > 
    <div class="panel-heading">Members Selected:</div> 
    <div class="panel-body"> 
     <ul class="list-group"> 
      <li class="list-group-item" ng-repeat="invitation in invitations"> 
       <div class="listmail"> {{invitation}}</div> 

      </li> 
     </ul> 
    </div> 
</div> 

配列は空であるようですが、コントローラに配列を渡すと、配列が空であるconsole.logを実行しようとします。 誰でも私を助けることができますか？

編集

これはすべて私のhtmlコードです：

    <form ng-controller="NewAuctionController" 
      name="myform"> 
    <div> 
     <div ng-hide="showBid"> 
     <div ng-show="uploading" class="progress"> 
     </div> 
     <label class="btn" style="background-color: #858892"> 
     Browse 
     <input type="file" ng-disabled="uploading" file-model="file.upload" name="myfile" style="display: none;" onchange="angular.element(this).scope().photoChanged(this.files)"> 
    </label> 
    <br> 
    <br> 
    <br> 
    <img class="mythumbnail" ng-src="{{ thumbnail.dataUrl || default }}"> 
<br> 
<br> 
<div ng-show="message"> 
    <div ng-class="alert">{{ message }}</div> 
</div> 
<div class="form-group" id="productname"> 
     <label for="exampleInputName1">Product Name</label> 
     <input type="text" class="form-control" id="exampleInputName1" placeholder="Enter Product" ng-model="productTitle" > 
</div> 
    <br> 
    <div class="form-group"> 
    <label for="exampleInputdescription1"> Description:</label> 
    <input type="text" class="form-control" id="exampleInputdescription1" placeholder="Enter Description" ng-model="productDescription" > 
</div> 
<div class="form-group"> 
    <label> Expiration Date:</label><br> 
    <input type="date" class="form-control" name="expiration date" ng-model="endtime" ><br> 
</div> 
<div class="quantity"> 
    <label>Quantity:</label><br> 
    <input type="number" name="quantity" ng-model="quantity" placeholder="u" class="form-control" ><br> 
</div> 
<div class="Warranty"> 
    <label>Warranty (days):</label><br> 
    <input type="number" name="warranty" class="form-control" ng-model="warranty" placeholder="days" ><br> 
</div> 
<div class="form-group"> 
    <label>Minimum Price:</label><br> 
    <input type="number" name="minimum price" id="min" ng-model="minPrice" placeholder="€" class="form-control" ><br> 
</div> 
<div class="form-group"> 
    <label>Buy-Now Price:</label><br> 
    <input type="number" name="minimum price" id="min" ng-model="productbuynow" placeholder="€" class="form-control" ><br> 
</div> 
<div class="form-group"> 
    <label>Location of the goods:</label><br> 
    <input type="text" name="location" id="country" ng-model="Country" placeholder="Country" class="form-control" ><br> 
    <input type="text" name="Town" id="town" ng-model="Town" placeholder="Town" class="form-control" ><br> 
    <input type="text" name="address" id="address" ng-model="Address" placeholder="Address" class="form-control" ><br> 
    <input type="text" name="Postal code" id="postalCode" ng-model="PostalCode" placeholder="Postal Code" class="form-control" ><br> 
</div> 
<div class="form-group"> 
    <label>Terms of payment: </label><br> 
    <select ng-model="payment"> 
     <option value="Letter of credit">Letter of credit</option> 
     <option value="Cash in advance">Cash in advance</option> 
     <option value="Confirmed Irrevocable Credit">Confirmed irrevocable Credit</option> 
    </select><br> 
</div> 
<div class="form-group"> 
    <label>Terms of Delivery: </label><br> 
    <select ng-model="delivery"> 
     <option value="Carriage Paid To">Carriage Paid To</option> 
     <option value="Free Carrier">Free Carrier</option> 
     <option value="Confirmed Irrevocable Credit">Ex Works</option> 
    </select><br> 
</div> 
      <input class="savebutton" type="submit" value="Invite People" ng-click="clickToOpen5()"><br> 

    <div ng-show="showBid" class="panel panel-default" ng-controller="NewAuctionController"> 
      <div class="panel-heading">Invite Members</div> 
      <div class="panel-body"> 
     <ul class="list-group" ng-repeat="user in users"> 
      <li class="col-md-4" id="userlist" ng-hide="user.name == profile"> 
      <img ng-src="{{user.img}}" class="userImage"> 
      <div class="username"> {{user.name}}</div> 
      <div class="userrole"> {{user.role}} </div> 
      <div class="usercompany">{{user.company}}</div> 
      <input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)"> 
       </li> 
       </ul> 
      </div> 
      <div class="panel-heading">Members Selected:</div> 
      <div class="panel-body"> 
      <ul class="list-group"> 
      <li class="list-group-item" ng-repeat="invitation in invitations"> 
       <div class="listmail"> {{invitation}}</div> 
     </li> 
     </ul> 
    </div> 

    <div class= "insertmail" ng-show=" showBid "> 
     Or Insert E-mail:<br> 
     <input type="email" name="emailaddress" ng-model="emailaddress"> 

    <div ng-show="showBid" class="panel panel-default" > 
       <div class="panel-heading">Mail Inserted:</div> 
       <div class="panel-body"> 
      <ul class="list-group"> 
       <li class="list-group-item" ng-repeat="mail in mails"> 
      <div class="listmail"> {{mail}}</div> 
      </li> 
      </ul> 
      </div> 
     </div> 
       <button ng-show="showBid" class="savebutton" ng-click="saveauction(profile)">SAVE</button><br> 
      </div> 
      </form> 

そして、これはすべて私のコントローラです：

   angular.module('NewAuctionCtrl', ['ngDialog', 'fileModelDirective', 'uploadFileService']).controller('NewAuctionController', ['$scope','$http' ,'ngDialog','uploadFile', '$timeout' , function($scope, $http, ngDialog, uploadFile, $timeout){ 
$scope.file = {}; 
$scope.message = false; 
$scope.alert = ''; 
$scope.photoChanged = function (files) { 
    if (files.length > 0 && files[0].name.match(/\.(png|jpeg|jpg|pdf)$/)) { 
     $scope.uploading = true; 
     var file = files[0]; 
     var fileReader = new FileReader(); 
     fileReader.readAsDataURL(file); 
     fileReader.onload = function(e) { 
      $timeout(function() { 
       $scope.thumbnail = {}; 
       $scope.thumbnail.dataUrl = e.target.result; 
       $scope.uploading = false; 
       $scope.message = false; 
      }); 
     }; 
    } else { 
     $scope.thumbnail = {}; 
     $scope.message = false; 
    } 
}; 
$http.get('/api/users').then(function(Users) { 
    $scope.users = Users.data; 
}); 

$scope.mails = []; 
$scope.emailaddress = ''; 

$scope.insertmail = function() { 

    $scope.mails.push($scope.emailaddress); 
    $scope.emailaddress = ''; 
}; 
$scope.invitations = [] ; 
$scope.insertinvited= function (user) { 
    if(user.isChecked) { 
     $scope.invitations.push(user.name); 
    } else { 
     var toDel = $scope.invitations.indexOf(user.name); 
     $scope.invitations.splice(toDel,1); 
    } 
    console.log($scope.invitations); 
}; 
$scope.saveauction = function (user) { 

    console.log($scope.invitations); 

    var array = { 
     param1: $scope.productTitle, 
     param2: $scope.productDescription, 
     param3: $scope.endtime, 
     param4: $scope.minPrice, 
     param5: $scope.productbuynow, 
     param6: user, 
     param7: $scope.quantity, 
     param8: $scope.warranty, 
     param9: $scope.Country, 
     param10: $scope.Town, 
     param11: $scope.Address, 
     param12: $scope.PostalCode, 
     param13: $scope.payment, 
     param14: $scope.delivery, 
     param15:$scope.invitations 
    }; 
     $scope.uploading = true; 
     uploadFile.upload($scope.file).then(function (data) { 
      if (data.data.success) { 
       $scope.uploading = false; 
       $scope.alert = 'alert alert-success'; 
       $scope.message = data.data.message; 
       $scope.file = {}; 
       $http.post('/api/newauction', array) 
        .then(
         function() { 
          swal(
           'Good job!', 
           'New Auction is created', 
           'success' 
          ) 

         }); 
       $scope.sendmail(); 
      } 
      else { 
       $scope.uploading = false; 
       $scope.message = data.data.message; 
       swal(
        'Oops...!', 
        $scope.message, 
        'error' 
       ); 
       $scope.file = {}; 
      } 
     }); 
    }; 
    $scope.clickToOpen5 = function() { 
    $scope.showBid = !$scope.showBid; 
}; 
    $scope.sendmail = function(){ 
    var address = $scope.mails; 
    console.log(address); 

    if(address[0]) { 
     $http.post('/api/sendmail/', {address: address}).then(function (err) { 
      if (err) 
       console.log(err); 
     }); 
    } 


}; 

}）;あなたが変更する必要があります

Answer 1

NG-変更するngのは、クリック

<input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)"> 

そして、あなたのデルで

が、私はそれが

var todel =$scope.invitations.indexOf(user.name); 
    $scope.invitations.splice(toDel,1); 

Answer 2

これは角JSでのスコープの継承の問題になる可能性がなければならないと思います。

は、以下の変更をしよう：

コントローラでthis保存のようないくつかのパラメータに：

var vm = this; 

今vm.invitationsの代わり$scope.invitationsを使用しています。

とng-repeat使用中：

ng-repeat="invitation in vm.invitations" 

Answer 3

あなたは、各クリックで列をクリアしています。

この文削除：

$scope.invitations = []; 

を、コントローラの本体に移動。それはうまくいくはずです（特にng-changeを使用している場合）。

Answer 4

これはjavascriptのプロトタイプの継承によるものです。 コントローラ内にはvar vm= thisを使用し、 コントローラでは$scope.invitations〜vm.invitations、htmlではinvitationsという名前を変更してvm.invitationsを使用しています。 は問題を解決します