Question

我有一个包含三个输入字段的表单：

vm.output

vm.id是我的控制器中定义的变量，其中包含一些字符串以及vm.email和vm.output = 'myurl.com?id=' + vm.id + '&email=' + vm.email;：

myurl.com?id=undefined&email=undefined

我想根据id和email字段中的用户输入生成输出URL。但是，当我在其他两个字段中输入一些输入时，输出字段不会更新。它只是说ng-value="'myurl.com?id=' + vm.id + '&email=' + vm.email"，

如果我使用

，我可以使用它

angular .module("app") .controller("MainController",[MainController); function MainController(){ var vm = this; vm.output = 'myurl.com?id=' + vm.id + '&email=' + vm.email; }

但是，我使用ng-clip来获取要使用ng-model复制的内容，因此我需要使用它。

另外，这是我的控制器：

List<string>

有什么建议吗？

Answer 1

你可以通过几种不同的方式实现这一目标。一种方法是在您要观看的每个输入上设置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;
    }
});

这是working plunker。

Answer 2

我会使用可以正确设置模型值的自定义指令：

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

AngularJS输入未使用ng-model更新

2 个答案: