update model value in AngularJS?

Question

Here is a code snipped of view and controller. Here what I want just click on save button I mean

<input class="btn btn-primary btn-lg mr-r15" type="button"
 ng-click="$parent.saveReleaseNotes(latestReleaseNotes,isEditabel);$apply()"
 ng-disabled="formSubmitted" value="{{saveButton}}" />

A request will be sent to server and when get success then tag must be hidden and

tag will show but not working

HTML:

<div class="clearfix mr-b25 bdr-b">
    <h6 class="mr-tb20">Release Notes &nbsp;&nbsp;
        <a ng-if="isEditabel == false" href="" ng-click="$parent.isEditabel = true"
        class="f-14 semi-bold mr-l15"> Edit </a>
    </h6>
</div>
<p ng-show="!isEditabel" class="form-control-static f-14">{{latestReleaseNotes}}</p>


<div ng-show="isEditabel">
    <textarea ng-model="latestReleaseNotes" rows="3" columns="15"
    class="form-control" ng-disabled="formSubmitting"></textarea>
    <br /> <input class="btn btn-primary btn-lg mr-r15" type="button"
    ng-click="$parent.saveReleaseNotes(latestReleaseNotes,isEditabel);$apply()"
    ng-disabled="formSubmitted" value="{{saveButton}}" /> <input
    type="button" ng-click="isEditabel = false" id="backLink"
    class="btn btn-link btn-lg" value="Cancel">
</div>

In controller:

$scope.saveReleaseNotes = function(latestReleaseNotes,isEditabel) {
    $scope.backgroundWorking = true;
    $scope.saveButton = 'Updating...';
    $http({
        url: '/apps/'+$scope.app.id+'.json',
        method: "PUT",
        data: {
            releaseNotes: latestReleaseNotes,
            appBuildId:$scope.app.latestBuild.id
        },
        headers: {
            'Content-Type': 'application/json'
        }
    }).success(function(data, status, headers, config) {
        if (data.result == "success") {
            flash.showSuccess(data.message);
            $scope.isEditabel = false;
        } else {
            flash.showError(data.message);
            $scope.latestReleaseNotes = $scope.app.latestBuild.releaseNotes;
        }
        $scope.backgroundWorking = false;
        $scope.saveButton = 'Save';
    }).error(function(data, status, headers, config) {
        flash.showError("Error occued while updating release notes");
        $scope.backgroundWorking = false;
        $scope.saveButton = 'Save';
    });
}

but model isEditable is not updated in view. I need hide <div> tag and show <p> tag on success.I'm trying by $scope.isEditabel = false; but it is not working.

Can you create a small fiddle to show us the issue? I am confused to why you mix and match between isEditabel and $parent.isEditabel — Nix
– Nix, Commented Apr 23, 2014 at 11:55
@Nix thanks for reply. when I removed all $parent then Edit link don't work and other $parent I have removed — Arif Khan
– Arif Khan, Commented Apr 23, 2014 at 12:08

Nix · Accepted Answer · 2014-04-23 12:09:13Z

I think your issue is you are toggling between using $parent.isEditable and isEditable. My first suggestion is to be consistent. Idealy isEditable is contained within the scope that you are using it. It seems a little odd to always be referencing "isEditable" of a parent.

If isEditable truly is contained within the parent you need to be careful about setting $scope.isEditable = true. You can end up redeclaring it on the child scope. I always suggest using functions like setIsEditable(true) and define that in the parent scope.

Trying to create a fiddle for you based on what you have given us.. but I think the below code would work.

//Parent scope
$scope.isEditabel = false;
$scope.setIsEditabel = function(value){
    $scope.isEditabel = value;
}

 <!-- updated html  -->

<div class="clearfix mr-b25 bdr-b">
    <h6 class="mr-tb20">Release Notes &nbsp;&nbsp;
        <a ng-if="$parent.isEditabel == false" href="" ng-click="$parent.setIsEditabel(true)"
        class="f-14 semi-bold mr-l15"> Edit </a>
    </h6>
</div>
<p ng-show="!$parent.isEditabel" class="form-control-static f-14">{{latestReleaseNotes}} 
</p>


<div ng-show="$parent.isEditabel">
    <textarea ng-model="latestReleaseNotes" rows="3" columns="15"
        class="form-control" ng-disabled="formSubmitting">
     </textarea>
    <br /> 
    <input class="btn btn-primary btn-lg mr-r15" type="button"
        ng-click="$parent.saveReleaseNotes(latestReleaseNotes,$parent.isEditabel);$apply()"
        ng-disabled="formSubmitted" value="{{saveButton}}" /> <input
        type="button" ng-click="$parent.isEditabel = false" id="backLink"
        class="btn btn-link btn-lg" value="Cancel"/>
</div>

the better solution(always debatable)*: I created a myModel this isn't necessary but it does clean things up a bit, esp. if you ever have to have multiple editable things on the same page.

We dont have to worry about passing around isEditable to the save, we shouldn't have to worry about apply. General suggestion is to make your html dumber..

//child scope
$scope.myModel = {
    latestReleaseNotes: latestReleaseNotes,
    isEditabel: false
}
$scope.saveReleaseNotes = function(){ 
   //do save 
   //we have everything we need on $scope (myModel, isEdiabel, etc.)
}

 <!-- updated html  -->

<div class="clearfix mr-b25 bdr-b">
    <h6 class="mr-tb20">Release Notes &nbsp;&nbsp;
        <a ng-if="myModel.isEditabel == false" href="" ng-click="myModel.isEditabel = true"
        class="f-14 semi-bold mr-l15"> Edit </a>
    </h6>
</div>
<p ng-show="!myModel.isEditabel" class="form-control-static f-14">{{myModel.latestReleaseNotes}} 
</p>


<div ng-show="myModel.isEditabel">
    <textarea ng-model="myModel.latestReleaseNotes" rows="3" columns="15"
        class="form-control" ng-disabled="formSubmitting">
     </textarea>
    <br /> 
    <input class="btn btn-primary btn-lg mr-r15" type="button"
        ng-click="saveReleaseNotes(myModel);"
        ng-disabled="formSubmitted" value="{{saveButton}}" /> <input
        type="button" ng-click="myModel.isEditabel = false" id="backLink"
        class="btn btn-link btn-lg" value="Cancel"/>
</div>

Collectives™ on Stack Overflow

update model value in AngularJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related