Question

我有两个输入文本框。我需要将输入的值组合在两个文本框中，并在第三个文本框中显示。如果我只使用第三个文本框中的value，我就可以显示它。

专栏1：

 <input type="text" ng-model="entity.name">

专栏2：

 <input type="text" ng-model="entity.code">

方框3：方框1 +方框2

  <input type="text" value="{{entity.name+ ' + ' + entity.code}}">

但是，如果我在第三个框中使用模型名称，逻辑似乎不起作用：

 <input type="text" value="{{entity.name+ ' + ' + entity.code}}" 
        ng-model="entity.fullCode">

有人可以建议修复吗？

Answer 1

这是一个很好的问题，因为它说明了Angular＆＃34;中的错误思考方式。会导致问题。

使用Angular，首先从模型开始。然后视图绑定到模型并反映它 - 而不是反过来。我的意思是ng-value不会设置模型，尽管它会改变视图。您（或更确切地说，控制器）负责设置模型。

因此，如果您需要entity.fullCode等于entity.name和entity.code的串联，那么您应该在控制器中设置它。

例如，如果您想在entity.name或entity.code更改时随时进行设置，则可以使用$watch进行设置：

$scope.$watch("entity.name + entity.code", function(newVal){
   $scope.entity.fullCode = $scope.entity.name + "+" + $scope.entity.code;
})

但请注意，由于您将entity.fullCode绑定到另一个输入，因此更改该输入将更改entity.fullCode，并且不会使其等于前两个输入中的+。< / p>

Answer 2

您需要使用$watch with true

function MyCtrl($scope) {
    $scope.entity={name:'',code:'',fullCode:''};
    $scope.$watch('entity',function(n,o){
        $scope.entity.fullCode = $scope.entity.name + $scope.entity.code;
    },true);

}

小提琴： - http://jsfiddle.net/405qc0xg/

Answer 3

$scope.entity = [];    
$scope.entity.name = "";    
$scope.entity.code = "";    

$scope.$watch("entity.name + entity.code", function(newVal){

    if($scope.entity.name != "" && $scope.entity.code != ""){
        $scope.entity.fullCode = $scope.entity.name + "+" + $scope.entity.code;
    }
    else {
        $scope.entity.fullCode = "";
    }
})

Answer 4

你需要使用$ watch。 一旦对象的值改变了$ watch的功能，它将一直监视所提到的obeject并且它将刷新$ scope 对于你的代码你需要写这个：

$scope.$watch('entity.name',function(){
        $scope.entity.fullCode=$scope.entity.name+' + '+$scope.entity.code;
    });
    $scope.$watch('entity.code',function(){
        $scope.entity.fullCode=$scope.entity.name+' + '+$scope.entity.code;
    });

Answer 5

我假设您正在使用controllerAs语法，并建议您在控制器中执行以下操作：

entity.fullCode = entity.name + ' - ' + entity.code;

然后你可以删除value属性，只需通过data-ng-model / ng-model绑定到元素。

Answer 6

希望这对你有所帮助，请看一下那个

http://plnkr.co/edit/oMUABphr6JcNEhCnCDKq?p=preview

$scope.obj = {first : '',second : ''};

$scope.$watch('obj', function(newval, oldval){
  $scope.obj.third = $scope.obj.first + $scope.obj.second;  
},true)

上面的代码说，当对象＆＃39; obj＆＃39;更改，然后$ watch中的代码将执行。

Answer 7

您的代码应该可以正常工作。有关正常工作的演示，请参阅此JSFiddle。

<div ng-app>
  <div>
    <label>Name:</label>
    <input type="text" ng-model="entity.name">
    <label>Code:</label>
    <input type="text" ng-model="entity.code">
    <label>Full Code:</label>
    <input type="text" value="{{entity.name + ' + ' + entity.code}}">
  </div>
</div>

ng-model和值组合不适用于输入文本框

7 个答案: