angularjs - Update ng-model value from controller?

Question

View 1:

<div ng-controller="ctrl1">
    <button ng-click="goToExtendedForm({'name':'aaa'})">
    </button>
</div>

ctrl1:

    $scope.selectedList = {
        name: ""
    };

    $scope.goToForm = function(e) {
        $scope.selectedList.name = e.name;
        $state.go('view2');
        console.log(e); // prints updated value
    };

View 2:

<div ng-controller="ctrl1">

<input
        id="name"
        name="name"
        type="text"
        ng-model="selectedList.name"
        ng-readonly="true"
/>
</div>

But the input box is always empty, even though to get to the view the goToForm() is called. Why doesn't it update the HTML value? Views are changed with ui.router's $state.

Give the entire code, please see how to ask a question on stack. — Deepanjan
– Deepanjan, Commented May 15, 2018 at 10:01
without an option to call goToForm(), how you fire goToForm() function ?? — Dushyantha
– Dushyantha, Commented May 15, 2018 at 10:09
When asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. That code should be… Complete – Provide all parts needed to reproduce the problem. See How to create a Minimal, Complete, and Verifiable example. — georgeawg
– georgeawg, Commented May 15, 2018 at 10:14

Aleksey Solovey · Accepted Answer · 2018-05-15 10:03:13Z

3

From your description, your code is supposed to work. Check if you are passing the right parameter into the function. Here is a working demo:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.selectedList = {
    name: ""
  };

  $scope.goToForm = function(e) {
    $scope.selectedList.name = e.name;
    console.log(e); // prints updated value
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  <button ng-click="goToForm({'name':'aaa'})">Change</button>
  <br>
  <input type="text" ng-model="selectedList.name" ng-readonly="true" />

</div>

answered May 15, 2018 at 10:03

Aleksey Solovey

4,1663 gold badges18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sajjad Shahi · Accepted Answer · 2018-05-15 10:03:04Z

0

Try adding $scope.$apply() at the end of your $scope.goToForm function

answered May 15, 2018 at 10:03

Sajjad Shahi

6025 silver badges15 bronze badges

Comments

Dushyantha · Accepted Answer · 2018-05-15 10:14:42Z

Try this ;

HTML Code

  <div ng-app>
      <div ng-controller="ClickToEditCtrl">
        <input
                                id="name"
                                name="name"
                                type="text"
                                ng-model="selectedList.name"
                                ng-readonly="true"
                        />
                        <button ng-click="goToForm(testUserDetails)" >Go To</button>

                        </button>
      </div>
    </div>

Define controller like this;

function ClickToEditCtrl($scope) {
  $scope.selectedList = {
        name: ""
    };
$scope.testUserDetails ={
        name: "nimal"
}
    $scope.goToForm = function(e) {
        $scope.selectedList.name = e.name;
        console.log(e); // prints updated value
    };
}

Collectives™ on Stack Overflow

angularjs - Update ng-model value from controller?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related