Question

在Angular（1.5）中，我有一个带有两个输入字段的表单：

ID
URL

规则：

如果ID字段为空，则URL字段应为空
如果手动设置了URL字段，则不应自动更改
否则，网址字段应为“http://myurl/”+ ID +“。txt”

我如何实现这一目标？

Answer 1

  <input type="text" name="url"
         ng-model="url"
         ng-model-options="{ getterSetter: true }" />

...

    function defaulUrl() {
       if $scope.ID {
          return 'http://myurl/'+$scope.ID+'.txt';
       } 

       return ''
    }

    var _url = defaultURl();

    $scope.url = {
       url: function(url) {

            return arguments.length ? (_url= url) : defaulUrl();
       }
    }

};

Answer 2

在ID字段上使用$watch。如果更改了ID字段，将调用监视功能。

$scope.$watch('$scope.ID', function() {
    $scope.url = 'http://myurl/' + $scope.ID + '.txt';
}, true);

Answer 3

这是我制作的符合您要求的小提琴：fiddle

代码

//HTML

<div ng-app="myApp" ng-controller="MyController">
    ID <input type="text" ng-model="data.id" ng-change="onIDChange()"/>
    URL <input type="text" ng-model="data.url" ng-change="onManualUrlChange()"/>
</div>

//JS

angular.module('myApp',[])
.controller('MyController', ['$scope', function($scope){
  $scope.data = {
    id:'',
    url:''
  }
  $scope.manualUrl = false;

  $scope.onIDChange = function(){
    if(!$scope.manualUrl){
      if($scope.data.id === ''){
        $scope.data.url = '';
      } else {
        $scope.data.url = "http://myurl/" + $scope.data.id + ".txt";
      }
    }
  }

  $scope.onManualUrlChange = function(){
    $scope.manualUrl = true
  };
}]);

根据Angular中的另一个字段设置输入字段的默认值

3 个答案: