我有一个有三个输入字段的表单:
<form name="myForm" novalidate ng-controller="MainController as vm">
<div>
<input type="text" ng-model="vm.id" name="idInput" required>
<input type="email" ng-model="vm.email" name="emailInput" required>
<input type="text" ng-model="vm.output" name="output">
</div>
</form>
vm.output
是在我的控制器中定义的变量,它包含一些字符串加上vm.id
和vm.email
:
vm.output = 'myurl.com?id=' + vm.id + '&email=' + vm.email;
我想根据id和email字段中的用户输入生成一个输出URL。但是,当我在另外两个字段中输入一些输入时,output字段不会更新。它只写着myurl.com?id=undefined&email=undefined
我可以让它工作,如果我使用
ng-value="'myurl.com?id=' + vm.id + '&email=' + vm.email"
然而,我正在使用ng-clip,它通过使用ng-model获得要复制的内容,所以我需要使用它。
还有,这是我的控制器:
angular
.module("app")
.controller("MainController",[MainController);
function MainController(){
var vm = this;
vm.output = 'myurl.com?id=' + vm.id + '&email=' + vm.email;
}
有什么建议吗?
您可以通过几种不同的方式完成此操作。一种方法是在您想要监视的每个输入上设置ng-change
事件:
<div>
<input type="text" ng-model="vm.id" ng-change="updateOutput()" name="idInput" required />
<input type="email" ng-model="vm.email" ng-change="updateOutput()" name="emailInput" required />
<input type="text" ng-model="vm.output" name="output" />
</div>
然后,您必须在控制器范围上构建update方法:
app.controller = app.controller('MainController', function($scope) {
$scope.vm = {
output: '',
email: '',
id: ''
};
$scope.updateOutput = function() {
$scope.vm.output = 'myurl.com?id=' + $scope.vm.id + '&email=' + $scope.vm.email;
}
});
这是一个工作的活塞
我会使用自定义指令来正确设置模型值:
app.directive('concatModel', function($parse) {
var pattern = function(data) {
return 'myurl.com?id=' + data.id + '&email=' + data.email;
};
return {
require: 'ngModel',
scope: {
data: '=concatModel'
},
link: function(scope, element, attrs, controller) {
scope.$watchCollection('data', function(newVal) {
controller.$setViewValue(pattern(newVal));
controller.$render();
});
}
};
});
,并像这样使用:
<div>
<input type="text" ng-model="vm.id" name="idInput" required="" />
<input type="email" ng-model="vm.email" name="emailInput" required="" />
<input type="text" concat-model="{id: vm.id, email: vm.email}" ng-model="vm.output" name="output" />
</div>
演示:http://plnkr.co/edit/sFW16LLZK3TezNAvYk5F?p=info