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

Question

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

方框 1：

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

方框 2：

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

盒子3:Box1+盒子2

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

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

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

任何人都可以提出修复建议吗？？

Answer 1

我假设您正在使用 controllerAs 语法并建议您在控制器中执行类似的操作：

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

然后您可以删除 value 属性并通过 data-ng-model/ng-model 简单地绑定到元素。

Answer 2

这是一个很好的问题，因为它说明了不正确的 "thinking in Angular" 会如何导致问题。

使用 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 并且不会使其等于前两个的 + .

Answer 3

您需要使用$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);

}

Fiddle:- http://jsfiddle.net/405qc0xg/

Answer 4

希望对您有所帮助，请查看plunker

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)

上面的代码说，只要对象 'obj' 发生变化，$watch 中的代码就会执行。

Answer 5

您的代码应该确实有效。请参阅此 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>

Answer 6

$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 7

你需要使用$watch。 一旦对象的值发生变化，它就会监视提到的对象， $watch 的函数将被调用并刷新 $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 8

<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" ng-model="entity.fullCode" value="{{entity.fullCode=entity.name + ' + ' + entity.code}}">
  </div>
</div>

您必须为您的 ng-model 属性分配一些内容，以便它可以绑定。您的代码似乎有效。但只是显示我们这样做的目的。干杯

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

ng-model and value combination not working for input text box

javascript

input

angularjs

angular-ngmodel