オブジェクトでオブジェクトのプロパティを更新する角度

Question

私は間違った用語を使用する場合、私は角度の新しいですので、私を許してください！可能であれば、最新のAngularバージョンを使用するソリューションも好むでしょう:-)かなり複雑な使用例があります。

これらのうちの1つは、顧客編集画面です。私はすでにリストページと顧客の詳細フォームを作成していますが、これはうまくいきます。これはまた、いくつかのJSONを返信します。これを私の例から削除しました。

ユーザーが設定する必要があるものは、複数の顧客ステージです。したがって、私はチェックボックスを使用します。

私がしていることは、現在のユーザーをスコープに読み込んで、その値を変更することです。 Webサービスに保存します。しかし、私はいくつかの複雑なプロパティを持っており、これらをバインドする方法を考え出すのは問題があります。

私は私が直接私のコントローラ上のオプションを置けば仕事を得ることができ、ここで、この例では、

http://plnkr.co/edit/cqsADe8lKegsBMgWMyB8?p=preview

は、しかし、私はcurrentUser.pipe上のチェックボックスをバインドすることはできません（コードに示されている）が発見プロパティ。どんな助けでも大歓迎です！

種類は、ここで

ジム

//our object definitions are here 
function User(Firstname, Lastname, Id) { 
this.Firstname = Firstname; 
this.Lastname = Lastname; 
this.PersonId = Id; 
this.uuid = "OG6FSDHG6DF86G89DSHGDF8G6"; 

//hold the customers source 
this.source = 2; 

//these are used to populate our selection boxes 
this.pipe = new Object(); 

//PROBLEM CODE IS HERE 
//I WOULD LIKE TO OUTPUT A CHECKBOX FOR EACH ITEM AND THEN UPDATE THE SELECTED VALUE WHEN A USER CLICK IT 
this.pipe.stages = [ 
    { id: 1, text: 'STAGE 1', selected: true }, 
    { id: 2, text: 'STAGE 2', selected: false }, 
    { id: 3, text: 'STAGE 3', selected: true }, 
    { id: 4, text: 'STAGE 4', selected: false } 
]; 

this.getFullName = function() { 
    return this.Firstname + " " + this.Lastname + " " + Id; 
}; 

} 

function UserController($scope) { 


//called to populate the customers list 
$scope.populateCustomers = function() { 

    //this will be populated form the server. I have extra code which allows  th euser ot select the customer and edit it and this works fine. 
    //I have removed the superflous code 
    $scope.userList = [ 
     new User("John", "Doe", 1), 
     new User("Henri", "de Bourbon", 2), 
     new User("Marguerite", "de Valois", 3), 
     new User("Gabrielle", "d'Estrées", 4) 
    ]; 
}; 

$scope.populateCustomers(); 

// the currentUser pobject is loaded by the user and modified. This works fine 
$scope.currentUser = $scope.userList[0]; 

//if i add the stages here i can get them to update however these are different for each 
//customer and would like the state to be held accordingly 
$scope.stages = [ 
    { id: 1, text: 'STAGE 1', selected: true }, 
    { id: 2, text: 'STAGE 2', selected: true }, 
    { id: 3, text: 'STAGE 3', selected: true }, 
    { id: 4, text: 'STAGE 4', selected: true } 
]; 


} 

については、私が使用しているテンプレートです。この1はscope.stages

stages from scope.stages<br /> 
    <label ng-repeat="stage in stages"> 
     <input type="checkbox" value="{{stage.name}}" ng-model="stage.selected">{{stage.name}} 
    </label> 
    <p>stages: {{stages}}</p> 

をオフ動作し、これは、私はそれがチェックボックスを示していますが、正しくバインドdoes notのがやりたいものです。

stages from currentUser.pipe.stages<br /> 
    <label ng-repeat="stage in currentUser.pipe.stages"> 
     <input type="checkbox" value="{{stage.name}}" ng-model="stage.selected">{{stage.name}} 
    </label> 
    <p>stages: {{stages}}</p> 

Answer 1

すべてが完全に機能します。私はcurrentUser.pipe.stagesテンプレートで間違った変数を印刷したと思います。それは<p>stages: {{currentUser.pipe.stages}}</p>になります。

stages from currentUser.pipe.stages<br /> 
<label ng-repeat="stage in currentUser.pipe.stages"> 
    <input type="checkbox" value="{{stage.name}}" ng-model="stage.selected">{{stage.name}} 
</label> 
<!-- Print currentUser.pipe.stages --> 
<p>stages: {{currentUser.pipe.stages}}</p> 

このPLUNKERを参照してください。その結合は適切です。