angularjs textarea - how to keep it in sync with angularjs dropdowns selected values

Question

I have a couple of drop downs and based on selection I updated the textarea content, but when I am trying to update the text the function, I presume gets triggered, and does not let me update.

Here is my html :

 <textarea  ng-model="desc" ng-change="des"></textarea>

and angular

somehow the code got deleted.. please visit plunker: http://plnkr.co/edit/pVSiNrnAOY0A5v0iTmYQ?p=preview

des() is a function not modal variable so you need to add bracket. — TechnoCrat
– TechnoCrat, Commented Mar 24, 2015 at 16:35
@Sam updated that and made it a function, it is still the same. — NoviceDeveloper
– NoviceDeveloper, Commented Mar 24, 2015 at 16:37
What you expect $scope.d to return? It has not been set, maybe you mean return $scope.d(), but this could cause an infinite loop, as the function updates $scope.desc which will trigger the ng-change... — trees_are_great
– trees_are_great, Commented Mar 24, 2015 at 16:48
@Sam $scope.d returns a string it has the same value as $scope.desc and $scope.dsc .. I was attempting different ways but couldn't figure... so it is a little redundant to use so many variables to just return same value. — NoviceDeveloper
– NoviceDeveloper, Commented Mar 24, 2015 at 16:58

trees_are_great · Accepted Answer · 2015-03-25 09:10:39Z

1

It is better to use watch functions, especially if values might change in the controller, as this ensures that they stay in sync. This solution also seems easier to see what is going on: plunkr solution

Just using a watch function to watch the selected values:

 $scope.$watch('selectedId', function(newValue){
    $scope.d();
  });

I am not sure if you want the user to be able to change the value in the textarea or not. If you don't, like in your example, then I suggest that you add the attribute ng-disabled="true" to your text area.

answered Mar 25, 2015 at 9:10

trees_are_great

3,9113 gold badges34 silver badges66 bronze badges

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

Comments

Steve Drake · Accepted Answer · 2015-03-24 16:58:54Z

0

you also need

$scope.des = function() {
    return $scope.d()
  }

Not sure what your trying todo, but if have just plunked this

// Code goes here
app = angular.module('myapp',[]);
app.controller('main', function($scope) {
  $scope.desc = "";
  $scope.stat = "test";
  $scope.d = function() {
    for (var i = 0, len = $scope.stat.length; i < len; i++) {

      if ($scope.stat[i].Id == $scope.selectedId && $scope.statDate == $scope.stat[i].StatDate) {
        $scope.desc = $scope.stat[i].D;
        return $scope.stat[i].D;
      }
    }
    return "";
  };

  $scope.des = function() {
    return $scope.d()
  }
});

And I get your issue, if I comment out

// $scope.desc = $scope.stat[i].D;

it works, but I presume that bit you need :)

What are you trying todo? I think you are trying to change model as the view is changed. You might need a directive for this.

This is part of something I did for datetime stuff

.directive('formatteddate', function ($filter) {
    return {
        link: function (scope, element, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {

This is the plunk of your code/html.

http://plnkr.co/edit/3GjP7YVsKFIYAAJQwmOK?p=preview

answered Mar 24, 2015 at 16:58

Steve Drake

2,0582 gold badges22 silver badges42 bronze badges

11 Comments

Steve Drake Over a year ago

it does if you comment out 'that' line of code, if you change the line of code. :)

Steve Drake Over a year ago

this one // $scope.desc = $scope.stat[i].D; you can change this code to something that changes .desc and that works, but I don't understand what you are doing with this.

ribsies Over a year ago

The reason why it's not working in this plunk is because $scope.stat and $scope.statDate and all that nonsense are all undefined. So that if statement always 100% of the time evaluates to true, so that bit of code is always run which resets the $scope.desc to an undefined variable. So you try to type and it instantly gets reset. I assume he is trying to change the value to some specific value when you type in a certain value. He did not provide the code for this.

NoviceDeveloper Over a year ago

@Steve Drake, $scope.selectedId & $scope.statDate are two drop downs to select from of json arrays, of 1-20 and the other "03/20/2015" and :"03/26/2015"...... the stat array is is like so: $scope.stat = ([{"Id":1,"D":"ABCD","StatDate":"03/20/2015"}, {"Id":2,"D":"ABCD" ,"StatDate":"03/26/2015"}]);

Steve Drake Over a year ago

so, when you EDIT the textbox you want it to set to ABCD if Id=1 and the StartDate is correct? I have added // Fake dropdown $scope.selectedId =1; $scope.statDate = '03/20/2015'

|

Ritt · Accepted Answer · 2015-03-28 20:46:48Z

0

okay,so what about if you just update the ng-model value of textarea to the value of your select dropdown.

Here's the plunker http://plnkr.co/edit/mXQTcBu5rOJaQJKEFKpm?p=preview

change the model name to some:

 <textarea ng-model="textarea" ng-change="desc()"></textarea>

and then update in, in your script where your code logic is:

$scope.d = function() {
    for (var i = 0, len = $scope.stat.length; i < len; i++) {
      console.log(i);
      if ($scope.stat[i].Id == $scope.selectedId && $scope.statDate == $scope.stat[i].StatDate) {
        $scope.desc = $scope.stat[i].D;
        **$scope.textarea=$scope.desc;**
        return $scope.stat[i].D;
      }
    }
    return "";
  };

answered Mar 28, 2015 at 20:46

Ritt

3,3693 gold badges27 silver badges55 bronze badges

1 Comment

Ritt Over a year ago

Its working right,it is letting you modify the text area filed which wasn't happening before.

Collectives™ on Stack Overflow

angularjs textarea - how to keep it in sync with angularjs dropdowns selected values

3 Answers 3

Comments

11 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

11 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related