複数のngモデルの回避策があります

テーブルにユーザーのリストを表示しています。各行の最後の列はボタンです。ボタンをクリックすると、クリックされた行に関連するユーザーを編集できるポップアップが表示されます。各ユーザーには興味のリストがあります。ポップアップでは、ユーザーの現在の関心事を表示したい複数の選択肢があります。最初にポップアップが表示されたら、正しいデータがフェッチされますが、他の行を何度もクリックしようとすると、データは同じままです。私はこれがng-model指令のためであることを知っていますので、この状況にはどのような回避策が理想的でしょうか？ここで複数のngモデルの回避策があります

は私の複数選択

<select id="multipleSelect" 
    data-placeholder="Select interests..." 
    chosen 
    multiple 
    ng-model="$ctrl.activeInterests" 
    ng-options="interest for interest in $ctrl.interests" 
    style="width:370px; height:100px;"> 
    <option value=""></option> 
</select>

表の最後の列からボタンをクリックすると、この関数は

this.editButtonClicked = function(tableRowUser) { 
    $scope.firstName = tableRowUser.firstName; 
    $scope.lastName = tableRowUser.lastName; 
    $scope.email = tableRowUser.email; 
    $scope.role = tableRowUser.role; 
    $scope.tag = tableRowUser.tag; 
    $scope.username = tableRowUser.username; 

    // Fetch the active interests 
    fetchInterests($scope.tag); 

    // Fetch the available interests the user can choose 
    fetchAllAvailableInterests(); 

    // After this, make the Edit Form visible 
    togglePopupClass(); 
}

と呼ばれ、「fetchInterests」関数で私が作るされていますng-modelに再度バインドされたデータは、何も成功せずに再び空になります。

function fetchInterests(newInterests) { 
    self.activeInterests = []; // <- Here I make it empty 
    var interests = newInterests.split('|'); 

    for (i = 0; i < interests.length; i++) { 
     // Trim the excess whitespace. 
     var tag = interests[i].replace(/^\s*/, "").replace(/\s*$/, ""); 
     self.activeInterests.push(tag); 
    } 
}

公式ドキュメントは、それが完全に新しいオブジェクトまたはコレクションに割り当てられている場合ng-modelのみ再レンダリングすることを言います。私もこれを試しましたが、成功しませんでした。

出典

2017-04-20 Alex Cipcigan Ratiu

self'は 'fetchInterests'中を指し'は何ですか？また、なぜ 'はvalue =" "ですか？ – Leguest

私はマルチ選択にAngular Chosenを使用しています。公式の例では、このように使用されています。自己が 'これ'（var self = this）を参照しています –

残念ながら、提供したコードに基づいてソリューションの問題点を教えていただけません。

ここでは、問題の解決に役立つ簡単なデモをご紹介します。

// Code goes here 
 
angular.module('myApp', []) 
 
.controller('myCtrl', ['$scope', function($scope){ 
 
    
 
    $scope.allInterests = ['Cars', 'Football', 'Fishing', 'Pets', 'Cooking']; 
 
    
 
    $scope.users = [ 
 
    { 
 
     name: 'Bob', 
 
     age: 34, 
 
     interests: ['Cars', 'Football'] 
 
    }, 
 
    { 
 
     name: 'Mary', 
 
     age: 33, 
 
     interests: ['Pets', 'Cooking'] 
 
    } 
 
    ]; 
 
    
 
    $scope.showDetails = function(user){ 
 
     $scope.selectedUser = user; 
 
    }; 
 
}]);

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-app="myApp" ng-controller="myCtrl"> 
 
    
 
    <table> 
 
     <tr ng-repeat="user in users"> 
 
     <td>{{user.name}}</td> 
 
     <td>{{user.age}}</td> 
 
     <td><button ng-click="showDetails(user)">Show interests</button></td> 
 
     </tr> 
 
    </table> 
 
    
 
    <hr> 
 
    
 
    Editing: {{selectedUser.name}} <br> 
 
    Age: {{selectedUser.age}} <br> 
 
    
 
    <select multiple ng-model="selectedUser.interests" ng-options="interest for interest in allInterests"></select> <br> 
 
    
 
    Selected interests: {{selectedUser.interests.join(',')}} 
 
    
 
    </body> 
 

 
</html>

出典

2017-04-20 13:18:45 flow3r

ありがとう、私は私のコンピュータに着くとすぐにこれを試し、私はそれが動作するかどうかをお知らせします。 –

複数のngモデルの回避策があります

答えて

関連する問題