使用对象 Angular 更新对象属性答案

【问题标题】：Updating object properties with objects Angular使用对象 Angular 更新对象属性
【发布时间】：2016-09-13 12:01:41
【问题描述】：

我是 Angular 的新手，所以如果我使用了不正确的术语，请原谅我！如果可能的话，我也更喜欢使用最新 Angular 版本的任何解决方案 :-) 我有一些相当复杂的用例。

其中之一是客户编辑屏幕。我已经建立了列表页面和客户详细信息表格，这很好用。这也回发了一些 JSON。我已将其从示例中删除。

用户必须设置的东西是可以有多个的客户阶段。因此我会使用复选框。

我所做的是将当前用户加载到范围中，然后修改其值。然后保存到网络服务。但是，我有一些复杂的属性，弄清楚如何绑定这些属性是有问题的。

我在这里找到了这个例子，如果我将选项直接放在我的控制器上，我就可以开始工作（显示在代码中）

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 }
];


}

这是我使用的模板。这个在 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>

这就是我想做的，但是它显示了复选框但没有正确绑定。

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>

【问题讨论】：

请提供复选框模板。
@Saad 我已将这些添加到我的帖子中
你的意思是它没有正确绑定。你的模型没有更新吗？
我将您的代码粘贴到一个 HTML 文件中，它工作正常。我怀疑为当前用户检索的内容以某种方式在格式上有所不同。您可以为实际客户发布返回的 JSON 吗？我怀疑某处存在差异。
@MikeFeltman 啊迈克，如果我能给你点披萨，我会的！ JSON 处理程序中存在错误。看来我的代码毕竟很好。好吧，至少我在这里有我的第一篇文章！感谢您抽出宝贵时间提供帮助！ :)

标签： angularjs checkbox binding

【解决方案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。它的绑定正确。

【讨论】：