使用ngchange修改复选框中的范围对象值

时间:2015-05-09 12:40:35

标签: javascript angularjs

原谅如果这是一个新手错误,但我认为这一定非常简单,我显然错过了一些东西..

我有以下ngrepeat:

       <div class="panel-body" data-ng-repeat="participant in activity.Participants" ng-show="showp" ng-init="participant.CheckInTime ='not set'"> <--The 'init' is for debug
            {{getparticipantName(participant.ParticipantID)}}

            Check in = {{participant.CheckInTime}}
            <input type="checkbox" ng-model="participant.CheckedIn"
                   ng-change="setToNowOrNull(participant.CheckedIn, 'participant.CheckInTime')">

            <br />
            Check in = {{participant.CheckInTime}}

        </div>

嵌套在另一个定义控制器等的ng-repeat中,并且工作正常。但是当我单击复选框时,会调用settoNowOrNull函数,按原样更改值,但这不会返回到participant.CheckInTime ..这里是函数:

        $scope.setToNowOrNull = function (deciderbool, thingtoset) {
        if (deciderbool)  //its been set to true.
        {
            $scope[thingtoset] = Date.now();
        }
        else //its been cleared to false
        {
            $scope[thingtoset] == null;
        }
    }

我在这里读了另一个问题之后添加了$ scope [thingtoset],但没有用...与ng-change行中'participant.CheckInTime'周围的单引号相同。 (这应该传递对象而不是值?).. 我显然没有得到一些东西,我想我可以用html angular完成它而不需要调用控制器来做一些如此微不足道的事情 - 我只需要将Date.Now()记录到参与者中。登记时间。有谁想?

3 个答案:

答案 0 :(得分:1)

你可以试试这个:

<input type="checkbox" ng-model="participant.CheckedIn"
       ng-change="setToNowOrNull(participant)">


$scope.setToNowOrNull = function (participant) {
    if (participant.CheckedIn)  //its been set to true.
    {
        participant.CheckInTime = Date.now();
    }
    else //its been cleared to false
    {
        participant.CheckInTime == null;
    }
}

答案 1 :(得分:1)

您的方法存在一些问题,尤其是

$scope[thingtoset] = Date.now();

使用传递给函数的值,这将是

$scope['participant.CheckInTime'] = Date.now();

这与

不同
$scope.participant.CheckInTime;

整个字符串代表一个对象键,必须将其解析为部分以获得2个级别。基本上它是你希望完成的无效语法

即使它有效,您的范围也没有此类对象,因为participant是视图中对象的别名。该对象位于数组activity.Participants内。

总之,将实际对象传递给您的函数并使用整个对象

如果你想要一个多属性的泛型方法,它需要更像:

$scope.setToNowOrNull = function (object, key){

   switch(key){
        case 'CheckInTime':
          // code for this key
         break;
   }
}

然后在标记中使用:

<input ng-change="setToNowOrNull(participant, 'CheckInTime')">

我怀疑您可能不需要这样的通用方法,并且可以简单地为该特定的更改处理程序传递参与者对象的单个参数

答案 2 :(得分:0)

在ng-repeat中,对象有自己的作用域,因此当你尝试写入 $ scope [thingtoset] 时,不是覆盖父作用域的相应对象,而是只需在较低的范围内创建另一个具有相同名称的对象。相反,您可以在较高范围内创建一个对象,例如 $ scope.thingHolder ,并且在调用此函数时,它可以更新 $ scope.thingHolder [thingtoset] 。然后,您也可以在较高范围内正确观察更改。