角度jsテキストボックスの値は、ドロップダウン時に変更する

ユーザーが「テキストボックス値空」を選択した場合、テキストボックスは無効にして、テキストボックスを消去する必要があります。私はそれのために以下のコードを使用しています。残念ながら私はそれをすることができませんでした。ユーザが値を入力して「text-box-value-empty」を選択した場合、テキストボックスはクリアされます。角度jsテキストボックスの値は、ドロップダウン時に変更する

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>

出典

2017-11-29 user1177842

役立つかもしれない： - [ビューにドロップダウン選択に空のモデルの値を設定する方法]（https://stackoverflow.com/questions/29197704/how-to-set- model-of-empty-on-drop-select-in-view） –

まず、作りselectedOptionとmyValとして空のオブジェクト

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

次に、$indexを使用して、各変数のプロパティとしてng-modelを割り当てます。また、その後、number関数にindexを渡すと、それはあるかもしれない

デモ

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>

出典

2017-11-29 06:29:21

ありがとう – user1177842

どう

について

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>

出典

2017-11-29 06:29:05 jitender

値を空にし、入力

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

を無効にするng-disabledを使用

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>

出典

2017-11-29 06:31:32

角度jsテキストボックスの値は、ドロップダウン時に変更する

答えて

関連する問題