Question

我有两个输入我正在应用typeahead： -

<div class="form-group>
      <label class="control-label=">Product Code:</label>
         <input placeholder="Enter Value" type="text" class="form-control" ng-model="a.productCode" typeahead="code for code in getProductByCode($viewValue)" typeahead-loading="loadingCodes" typeahead-no-results="noResults"/>

   <label class="control-label">Product Name:</label>
      <input placeholder="Enter Value" type="text" class="form-control" ng-model="getNgModel(a)" typeahead="code for code in getProductNameByCode($viewValue,a.producrCode)" typeahead-loading="loadingCodes" typeahead-no-results="noResults" ng-disabled="!a.productCode"/>

   <button type="button" ng-disabled="!a.productCode">Show</button>
  </div>

我的指令代码： -

(function () {
    'use strict';
    angular.module('myApp.components')
        .directive('products', products);

    products.$inject = ['$http', '$timeout', 'ApiServices'];

    function products($http, $timeout, ApiServices) {
        return {
            restrict: 'EA',
            scope: {

            },

            link: function (scope, el, attrs) {
              scope.a = {};

              scope.getNgModel = function (a) {
              if(a.productCode){
                return a.productName;
              }else{
                return '';
              }
           };

           scope.getProductCode = function(key){
                var obj = {"key": key}
                if(key.length>=2){
                    return ApiServices.getProductCodee(obj).then(function             (response) {
                        return response.data.map(function(item){
                            return item;
                        });
                    });
                } else {
                    return false;
                }
            }

        scope.getProductCodeByName = function (key,Code) {
            var obj = {"key": key, "Code":Code}
            if(key.length>=2){
                return ApiServices.getProductCodeByName(obj).then(function (response) {
                    return response.data.map(function(item){
                        return item;
                    });
                });
            } else {
                return false;
            }
        }; 

        },
            templateUrl: ''
        };
    }

})();

我想要的是当我从产品代码中选择特定值时，产品名称和按钮会被启用，否则会被禁用。此外，当禁用productName时，其中的值设置为null。因为前一个值仍然绑定到它，甚至被禁用。

Answer 1

我无法清楚地理解你问题的第二部分.. 同样当禁用productName时，其中的值被设置为null。因为前一个值仍然绑定到它甚至被禁用

试试这个

<!DOCTYPE html>
<html ng-app="myApp">
<head>
	<title></title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

	<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.4.0/ui-bootstrap-tpls.min.js"></script>



	<script type="text/javascript">
		angular.module('myApp', ['ui.bootstrap'])
		.controller("mainCtrl", function ($scope) {
			$scope.selected = '';
			$scope.states = [
			{
				id:1,
				name:'A'
			},{
				id:2,
				name:'B'
			}
			];
			var selectedByUser = false;

			$scope.onSelectValue = function(selected){
				$scope.selected = selected.name;
				$scope.disableFields = false;
				selectedByUser = true;


			};

			$scope.changingInput = function(inputValue){
				// $scope.selected = null;
				if (inputValue && inputValue.id) {
					$scope.disableFields = true;
				}else{
					if (inputValue.length>0 && selectedByUser) {
						$scope.disableFields = false;
					}else{
						$scope.disableFields = true;
						// $scope.selected = null;
						selectedByUser = false;
					}
				}

			};

			$scope.disableFields = true;


		});
	</script>
</head>
<body ng-controller="mainCtrl">
	<div class="container">
		<div class="form-group">
			<label class="control-label=">Product Code:</label>
			<input placeholder="Enter Value" ng-change="changingInput(selected)" type="text" class="form-control" ng-model="selected" typeahead="state as state.name for state in states | filter:$viewValue" typeahead-on-select="onSelectValue(selected)" typeahead-loading="loadingCodes" typeahead-no-results="noResults"/>

			<label class="control-label">Product Name:</label>
			<input placeholder="Enter Value" type="text" class="form-control" typeahead-loading="loadingCodes" typeahead-no-results="noResults" ng-disabled="disableFields"/>

			<button class="btn btn-default" type="button" ng-disabled="disableFields">Show</button>
		</div>
		{{selected}}

	</div>
</body>
</html>

如果它在这里不起作用，那么将其复制粘贴到编辑器中然后尝试。即使之后它不起作用然后你可以去我的gihub account，你会找到我的电子邮件地址，然后分享你的邮件地址，这样我就会给你邮寄压缩解决方案。

禁用文本框时重置该值

1 个答案: