2017-11-29 13 views
0

Wenn Benutzer "Textbox-Wert-leer" auswählen, sollte Textbox deaktiviert und Textbox sollte gelöscht werden. Ich verwende unten Code für tun es. aber leider konnte ich es nicht tun. Wenn der Benutzer einen Wert eingibt und "text-box-value-empty" auswählt, sollte das Textfeld gelöscht werden.eckig js Textfeld Wert leer, wenn Dropdown-Liste

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,"; 
 
\t \t $scope.number = function() { 
 
\t \t \t \t \t \t 
 
      
 
\t \t \t \t \t } 
 

 

 
});
<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>

+0

kann hilfreich sein: - [, wie der Wert des Modells im Hinblick auf leeren Drop-Down-Auswahl einstellen] (https://stackoverflow.com/questions/29197704/how-to-set- the-value-of-model-leer-auf-dropdown-selection-in-view) –

Antwort

1

erste, machen die selectedOption und myVal als leere Objekte

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

Dann ordnen Sie das ng-Modell als die Eigenschaft jeder Variablen mit $index. Nutzen Sie auch die ng-disabled den Eingang

<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> 

dann passieren die index an die number Funktion zu deaktivieren und die Werte leer

Demo machen

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>

+0

Vielen Dank – user1177842

0

Was

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,"; 
 
\t \t $scope.number = function(item) { 
 
        item.disabled=false; 
 
\t   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>

0

Es könnte sein, hilfreich für Sie

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,"; 
 
     \t $scope.number = function(index) { 
 
      
 
      if($scope.data[index].selectedOption=="text-box-value-empty") 
 
      { 
 
      \t \t \t \t $scope.data[index].myval=""; 
 
        $scope.data[index].visible=false; 
 
      
 
      }else{ 
 
      \t \t \t \t 
 
        $scope.data[index].visible=true; 
 
      } 
 
     \t \t   
 
     \t \t \t \t \t } 
 

 

 
     });
 <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>