如何通过匹配特定字符串将值从一个 ng-model 绑定到另一个 ng-model

Question

当另一个模型中的值包含以 "https" 开头的字符串时，我需要将一个值绑定到特定模型。

例如，我有两个文本字段，两个字段都有不同的模型

<input type="text" ng-model="modelText1"> 
<input type="text" ng-model="modelText2">

假设我在第一个文本字段 "https" 上键入一个值，第一个输入模型 modelText1 必须绑定到第二个输入模型 modelText2，稍后我必须像双向绑定一样维护它。即第二个字段在字符串开头包含 "https" 时将自动动态获取值。

Answer 1

试试这个 Demo fiddle.

查看

<div ng-controller="MyCtrl">
  <input type="text" ng-model="modelText1"> 
  <input type="text" ng-model="modelText2"> 
</div>

AngularJS申请

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.modelText1 = '';
    $scope.modelText2 = '';

    var regEx = new RegExp(/^https/);

    $scope.$watch('modelText1', function (newValue) {
       if (newValue.toLowerCase().match(regEx)) {
          $scope.modelText2 = newValue;
       } else {
          $scope.modelText2 = '';
       }
    });
});

另一种方法是（避免使用 $watch）是使用 AngularJS ng-change 就像

example fiddle。

查看

<div ng-controller="MyCtrl">
  <input type="text" ng-model="modelText1" ng-change="change()"> 
  <input type="text" ng-model="modelText2"> 
</div>

AngularJS申请

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.modelText1 = '';
    $scope.modelText2 = '';
    var regEx = new RegExp(/^https/);

    $scope.change = function () {
       if ($scope.modelText1.toLowerCase().match(regEx)) {
          $scope.modelText2 = $scope.modelText1;
       } else {
          $scope.modelText2 = '';
       }
    };
});

Answer 2

使用ng-change检查文本是否等于'https'

angular.module('app',[])
.controller('ctrl',function($scope){
  $scope.changeItem = function(item){
   
  $scope.modelText2 = "";
    if(item.toLowerCase() === "https"){
      $scope.modelText2 = item
    }
    
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl"> 
<input type="text" ng-model="modelText1" ng-change="changeItem(modelText1)"> 
  <input type="text" ng-model="modelText2"> 
</div>

EDiTED

确保它不会在 'HTTPS' 下失败使用 toLoweCase 函数使所有小写

Answer 3

您可以像这样使用 ng-change 指令：

<input type="text" ng-model="modelText1" ng-change="onChange()"> 
<input type="text" ng-model="modelText2">

和您的控制器：

$scope.onChange = function() {
   if ($scope.modelText1 === 'https') {
     $scope.modelText2 = $scope.modelText1;
   else
     $scope.modelText2 = '';
};

Answer 4

HTML :

<input type="text" ng-model="modelText1" ng-change="updateModal(modelText1)">

JS :

var modelText1 = $scope.modelText1.toLowerCase();

    $scope.updateModal = function(){
        $scope.modelText2 = '';
        if(modelText1.indexOf('https')!=-1){
              $scope.modelText2 = modelText1;
        }
    }

Answer 5

如果你想在多个视图上有一个更可重用的解决方案，你也可以把它作为一个指令来做 http://jsfiddle.net/j5ga8vhk/7/ 它还使控制器更干净，我总是尝试仅将控制器用于控制复杂的业务逻辑和业务数据

查看

<div ng-controller="MyCtrl">
  <input type="text" ng-model="modelText1" > 
  <input type="text" ng-model="modelText2" model-listener="modelText1" model-listener-value="https" > 
</div>

Angular JS

var myApp = angular.module('myApp',[]);

    myApp.controller('MyCtrl', function ($scope) {
        $scope.modelText1 = '';
        $scope.modelText2 = '';

        });


myApp.directive('modelListener', [function()    {

    return {

        restrict: 'A',

        controller: ['$scope',  function($scope) {

        }],
        link: function($scope, iElement, iAttrs, ctrl) {

            $scope.$watch(iAttrs.modelListener, function() {

                if($scope[iAttrs.modelListener] === iAttrs.modelListenerValue ) {
                   $scope[iAttrs.ngModel] = $scope[iAttrs.modelListener];
                } else {
                    $scope[iAttrs.ngModel] = "";
                }
            }, true);

        }
    };

}]);

如何通过匹配特定字符串将值从一个 ng-model 绑定到另一个 ng-model

How to bind a value from one ng-model to an other by matching a specific string

javascript

angularjs

angular-ngmodel

查看

AngularJS申请

查看

AngularJS申请