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

【问题标题】：ng-model and value combination not working for input text boxng-model 和值组合不适用于输入文本框
【发布时间】：2015-04-05 01:11:36
【问题描述】：

我有两个输入文本框。我需要组合在两个文本框中输入的值并在第三个中显示。如果我在第三个文本框中只使用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">

谁能提出解决办法？？

【问题讨论】：

你试过ng-value吗？
“逻辑似乎不起作用”是什么意思？什么是“逻辑”？
@New Dev ,绑定两个文本框的值
@Foo.我试过了。它不工作
谢谢@Foo。它真的很有帮助

标签： javascript angularjs input angular-ngmodel

【解决方案1】：

<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 属性分配一些东西，以便它可以绑定。您的代码似乎有效。但只是显示我们这样做的目的。干杯

【讨论】：

【解决方案2】：

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

【讨论】：

对 dup 代码投反对票。您可以使用$watchGroup 并传递一个包含名称和代码的数组

【解决方案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 = "";
    }
})

【讨论】：

【解决方案4】：

这是一个很好的问题，因为它说明了不正确的“在 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，并且不会使其等于前两个的+。

【讨论】：

为此创建一个 $watch 有点矫枉过正，不是吗？另外，我相信他试图以这样的方式结束：“something + something”——其中字符串实际上包含 + 字符。
@MEANDeveloper，修复了“+”...很难说这是矫枉过正，因为尚不清楚最终目标是什么。应该只通过两个输入框来改变吗？然后ng-change 会更好。顺便说一句，深度观察（如另一个答案）肯定效率较低
你是对的。像我一样很容易陷入这种想法。

【解决方案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>

【讨论】：

确实有效。但是如何将值设置为模型。这就是问题所在？
啊我明白你的意思，那么你应该接受@new-dev 接受的答案。它监视 entity.name 和 entity.code 的变化并显式创建/更新第三个模型值。

【解决方案6】：

希望对你有帮助，请查看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里面的代码就会执行。

【讨论】：

【解决方案7】：

你需要使用$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/

【讨论】：

谢谢@squiroid。意义重大
很高兴为您提供帮助。
@MANOJ，小心深度观察（true）。如果你有一个大的或嵌套的对象，这将是非常低效的。浅层观察表达式通常更便宜：$watch("entity.name + entity.code", ...)

【解决方案8】：

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

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

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

【讨论】：

。我没有使用 ControllerAs 语法。
然后只需使用 $scope.entity.whatever 代替 :) 看看这是否适合你。
感谢您的信息:)