Question

我是棱角分明的新人，如果我使用不正确的术语，请原谅我！如果可能的话，我也希望使用最新的Angular版本的任何解决方案:-)我有一些相当复杂的用例。

其中一个是客户编辑屏幕。我已经建立了列表页面和客户详细信息表单，这很有效。这也回发了一些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 }
];


}

以下是我使用过的模板。这个可以使用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>

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>

见See full stack trace。它的绑定得当。

使用Angular对象更新对象属性

1 个答案: