angular js textbox value empty when drop down change

Question

if user select "text-box-value-empty", textbox should be disable and textbox should clear. i am using below code for do it. but unfortunately i could not do it. if user enter value and select "text-box-value-empty", textbox should clear.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myList = [{
    text: "1",
    value: "option_1"
  }, {
    text: "2",
    value: "option_2"
  },];
  $scope.sizes = "D,text-box-value-empty,";
		$scope.number = function() {
						
            
					}


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en-US">

<script src="angular.js"></script>


<body>
<div ng-app="myApp" ng-controller="myCtrl"> 
<div>
<div ng-repeat="a in myList">
   <select ng-model="selectedOption" ng-options="choice as choice for (idx, choice) in sizes.split(',')" ng-change="number()">
   
  </select>
   
   <input type="text" ng-model="myval"/> 
</div>
</div>


</div>
</body>
</html>

May be helpful:- how to set the value of model empty on dropdown selection in view — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Nov 29, 2017 at 6:20

Sachila Ranawaka · Accepted Answer · 2017-11-29 06:29:21Z

first, make the selectedOption and myVal as empty objects

$scope.myval = {}
$scope.selectedOption = {};

Then assign the ng-model as the property of each variables using $index. Also, use the ng-disabled to disable the input

<div ng-repeat="a in myList">
   <select ng-model="selectedOption[$index]" ng-options="choice as choice for (idx, choice) in sizes.split(',')" ng-change="number($index)">

  </select>

   <input ng-disabled="selectedOption[$index] == 'text-box-value-empty'" type="text" ng-model="myval[$index]"/> 
</div>

then pass the index to the number function and make the values empty

Demo

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.myList = [{
        text: "1",
        value: "option_1"
    }, {
        text: "2",
        value: "option_2"
    }, ];
    $scope.myval = {}
    $scope.selectedOption = {};
    $scope.sizes = "D,text-box-value-empty,";
    $scope.number = function(index) { 
        if ($scope.selectedOption[index] == 'text-box-value-empty')         {
            $scope.myval[index] = ''
        }

    }


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en-US"> 


<body>
<div ng-app="myApp" ng-controller="myCtrl"> 
<div>
<div ng-repeat="a in myList">
   <select ng-model="selectedOption[$index]" ng-options="choice as choice for (idx, choice) in sizes.split(',')" ng-change="number($index)">
   
  </select>
   
   <input ng-disabled="selectedOption[$index] == 'text-box-value-empty'" type="text" ng-model="myval[$index]"/> 
</div>
</div>


</div>
</body>
</html>

jitender · Accepted Answer · 2017-11-29 06:29:05Z

What about

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myList = [{
    text: "1",
    value: "option_1"
  }, {
    text: "2",
    value: "option_2"
  },];
  $scope.sizes = "D,text-box-value-empty,";
		$scope.number = function(item) {
                   item.disabled=false;
	           if(item.selectedOption =='text-box-value-empty'){
                       item.myval=''
                       item.disabled=true;
                       }
                    }
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl"> 
<div>
<div ng-repeat="a in myList">
   <select ng-model="a.selectedOption" ng-options="choice as choice for (idx, choice) in sizes.split(',')" ng-change="number(a)">
  </select>
   
   <input type="text" ng-model="a.myval" ng-disabled="a.disabled"/> 
</div>
</div>


</div>

Kalaiselvan · Accepted Answer · 2017-11-29 06:31:32Z

It might be helpful to you

  var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
         
          $scope.myList = [{
            text: "1",
            value: "option_1"
          }, {
            text: "2",
            value: "option_2"
          },];
          $scope.data=[
          {myval:"",selectedOption:0},{myval:"",selectedOption:0}
          ]
          $scope.sizes = "D,text-box-value-empty,";
        	$scope.number = function(index) {
           
            if($scope.data[index].selectedOption=="text-box-value-empty")
            {
            				$scope.data[index].myval="";
                    $scope.data[index].visible=false;
            
            }else{
            				
                    $scope.data[index].visible=true;
            }
        		        
        					}


        });

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
     
        <div ng-app="myApp" ng-controller="myCtrl"> 
        <div>
        <div ng-repeat="a in myList">
           <select ng-model="data[$index].selectedOption" ng-options="choice as choice for (idx, choice) in sizes.split(',')" ng-change="number($index)">
           
          </select>
           
           <input type="text" ng-model="data[$index].myval" ng-show="data[$index].visible"/> 
        </div>
        </div>
        </div>

Collectives™ on Stack Overflow

angular js textbox value empty when drop down change

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related