how to bind dynamically dropdown based checkbox true in ng-repeat using angulrajs

Question

hi all i am using angularjs ng-repeat i have checkbox and dropdown in inside the repeat now my need is when check the checkbox value i want bind the dropdown but now when i check the checkbox all dropdown values are changed but my need i want bind the dropdown based checkbox help how to solve

ng-repeat code

 <div ng-repeat="BFMaterialStream in BFMaterialStreams">
   <input type="checkbox" ng-change="checkchange(BFMaterialStream.MaterialStream,$index)"
   ng-model="selection.ids[BFMaterialStream.MaterialStream]" name="group" id="BFMaterialStream.MaterialStream" />
    {{BFMaterialStream.MaterialStream}} 
        <select id="MaterialElevator" tabindex="7" required typeof="text" name="Elevator"
         form="DistanceMatrixFormId" class="form-control" 
          ng-model="ViewGetBUMaterialStream.ToElevator"
     >
     <option value=''>Select</option>
     <option ng-repeat="ViewGetBUMaterialStream in ViewGetBUMaterialStreams "
      value="{{ViewGetBUMaterialStream.ToElevator}}"
      >
     {{ViewGetBUMaterialStream.ToElevator}}
    </option>
     </select>
       </div>

check change time bind code

$scope.checkchange = function(Stream, index) {
     $http.get('/ViewGetBUMaterialStream/' + Stream ).then(function (response) {
           $scope.ViewGetBUMaterialStreams = response.data;
     });
}

Amir Suhail · Accepted Answer · 2017-05-04 09:38:02Z

1

Make $scope.ViewGetBUMaterialStreams as an array.

In HTML change the repeat as

<option ng-repeat="ViewGetBUMaterialStream in ViewGetBUMaterialStreams[$index]"
      value="{{ViewGetBUMaterialStream.ToElevator}}">

In change your $scope.ViewGetBUMaterialStreams = response.data assignment as $scope.ViewGetBUMaterialStreams[index] = response.data

JS looks like this:

$scope.ViewGetBUMaterialStreams = [];
$scope.checkchange = function(Stream, index) {
     $http.get('/ViewGetBUMaterialStream/' + Stream ).then(function (response) {
           $scope.ViewGetBUMaterialStreams[index] = response.data;
     });
};

answered May 4, 2017 at 9:38

Amir Suhail

1,3043 gold badges13 silver badges32 bronze badges

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

6 Comments

jose Over a year ago

super Thanks Mr.Amir Suhail.i am tried that way but i forgot to scope into array

Amir Suhail Over a year ago

No problem. Just a pointer, always its a best pratice to use ng-options instead on ng-repeated <option>

jose Over a year ago

another query when i select dropdown i need suto auto check in checkbox

jose Over a year ago

what is main difference option and repeat

Amir Suhail Over a year ago

The main difference is when the select model bound to a non-string value, option wont able to repeat that. See docs docs.angularjs.org/api/ng/directive/select

|

Mistalis · Accepted Answer · 2017-05-04 09:26:45Z

0

You may want to use ng-options directive:

<select ng-model="ViewGetBUMaterialStream.ToElevator"
        ng-options="stream.ToElevator as stream for stream in ViewGetBUMaterialStreams">
     <option value=''>Select</option>
</select>

Here is a JSFiddle of a simple use case of ng-options

edited May 4, 2017 at 9:26

answered May 4, 2017 at 9:25

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

1 Comment

jose Over a year ago

same yar because of ngrepeat ervery time i have to check the checkbox value will change all drop down

Collectives™ on Stack Overflow

how to bind dynamically dropdown based checkbox true in ng-repeat using angulrajs

ng-repeat code

2 Answers 2

6 Comments

Here is a JSFiddle of a simple use case of ng-options

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

ng-repeat code

2 Answers 2

6 Comments

1 Comment

Linked

Related