javascript - 下拉更改时 Angular js文本框值为空

标签 javascript jquery angularjs

如果用户选择“文本框值-空”,则文本框应禁用并清除文本框。我正在使用下面的代码来做到这一点。但不幸的是我做不到。 如果用户输入值并选择“text-box-value-empty”,则文本框应清除。

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>

最佳答案

首先,将selectedOptionmyVal设置为空对象

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

然后使用 $index 将 ng-model 指定为每个变量的属性。另外,使用ng-disabled禁用输入

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

然后将index传递给number函数并将值设为空

演示

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>

关于javascript - 下拉更改时 Angular js文本框值为空,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47546243/

相关文章:

javascript - 如何从此倒计时器中删除天数或其他元素

javascript - 将值从 javascript 传递到 php

javascript - jQuery 管理许多切换

javascript - Angular 刷新终止用户 session

javascript - 如何在Angularjs中添加get请求参数

javascript - 单击列表中的每个单选按钮后 ng-change 不触发

javascript - 将 `c > 3 && r && Object.defineProperty(target, key, r), r`重写为 "normal"演示

javascript - 如何在 vue.js 中使用属性选择器?

javascript - jQuery .append() 不同步?

jquery - 当我在 Fixed Bar 中使用时,下拉菜单在 Internet Explorer 9 中不起作用