current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite
1

I have a dynamic text field value from angularjs post request. Based on the response text field will increase or decrease. I want to edit that value from multiple selected options field.

Html code given below. 

<tr ng-repeat="opt in myData">
     <td>
        <input type="text" id="opt{{$index + 1}}" name="option{{$index + 1}}"   ng-model="opt.options" ng-value="opt.options"  />
     </td>
     </tr>

Multiple select options are here, based on the selection I want to change the text field value

Html code for first selection given below 

<select ng-model="garden" multiple="multiple">
  <option>Flowers</option>
  <option>Shrubs</option>
  <option>Trees</option>
  <option>Bushes</option>
  <option>Grass</option>
  <option>Dirt</option>
</select>

Second Selection Html code given below 

<select ng-model="country" multiple="multiple">
  <option>USA</option>
  <option>UK</option>
  <option>USR</option>
</select>

Please any one help I'm new in Angularjs. Thanks for all

share|improve this question
1  
I think you could make the question clearer. It is not clear how text fields in ng-repeat relate to the drop-down lists. Which text field did you refer to and how should it be updated? – kubuntu 23 hours ago
    
From ng-repeat I got three text field with value. I want to edit that value using selection field. – Rijo 23 hours ago
    
when i click option 'USA' I want to edit that text field value as USA in the first text field. Next I click 'Trees' I want two text field first as USA and second text field as 'Trees' – Rijo 23 hours ago
    
How do you decide which of the 3 text fields to update? Since it is multiple select, what happens when you click 'Trees' and 'Dirt'? You could add ng-change directive to select and update myData accordingly. – kubuntu 23 hours ago
    
using Jquery I can do demo jsfiddle.net/mh7Lvpug/1 is it possible for angularjs ? – Rijo 23 hours ago
up vote 1 down vote accepted

You can add ng-change directive to select and update myData accordingly in controller.

<table>
  <tr ng-repeat="opt in myData">
    <td>
      <input type="text" id="{{opt.id}}" name="{{opt.id}}" value="{{opt.value}}" />
    </td>
  </tr>
</table>


<select ng-model="country" multiple="multiple" ng-change="selectChange(country)">
  <option>USA</option>
  <option>UK</option>
  <option>USR</option>
</select>

<select ng-model="garden" multiple="multiple" ng-change="selectChange(garden)">
  <option>Flowers</option>
  <option>Shrubs</option>
  <option>Trees</option>
  <option>Bushes</option>
  <option>Grass</option>
  <option>Dirt</option>
</select>

selectChange() in controller

$scope.selectChange = function(val) {
      // selection logic goes here
      $scope.myData = []; // reset selections
      var id = $scope.myData.length;
      angular.forEach(val, function(v, k) { // iterate list and add new selections 
        $scope.myData.push({
          'id': id + k,
          'value': v
        });
      });
    };

http://jsfiddle.net/nxjtL7wa/2/

share|improve this answer
    
thanks for hard work – Rijo 22 hours ago
    
You're welcome. Probably not exactly what you wanted but should get you started. – kubuntu 22 hours ago
    
How can i avoid duplicate data entry ? – Rijo 10 hours ago
1  
Did you take $scope.myData out of the function? You can ask a new question on that. – kubuntu 9 hours ago
1  
jsfiddle.net/nxjtL7wa/5 – kubuntu 8 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.