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

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

提问by forgottofly

I'm having two input text box. I need to combine the values entered in two text boxes and display it in the third. I'm able to display it if I use only the valuein the third text box.

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

Box 1:

方框 1：

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

Box 2:

方框 2：

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

Box 3:Box1+Box 2

箱3：箱1+箱2

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

However if I use a model name in the third box, the logic doesn't seem to be working:

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

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

Can anyone suggest a fix ??

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

回答by New Dev

This is a good question as it illustrates how incorrect "thinking in Angular" can lead to issues.

这是一个很好的问题，因为它说明了不正确的“在 Angular 中思考”是如何导致问题的。

With Angular you start with model first. Then the View is bound to the model and reflects it - not the other way around. What I mean by that is that ng-valuewould not set the model, although it would alter the view. You (or rather, the controller) is responsible for setting the model.

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

So, if you need entity.fullCodeto equal the concatenation of entity.nameand entity.code, then you should set it in the controller.

所以，如果你需要entity.fullCode等于entity.nameand的串联entity.code，那么你应该在控制器中设置它。

For example, if you wanted to set it any time entity.nameor entity.codechange, then you could do so with $watch:

例如，如果您想随时设置entity.name或entity.code更改它，那么您可以使用$watch：

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

Note, though, that since you are binding entity.fullCodeto another input, changing that input would change entity.fullCodeand would not make it equal to the +of the first two.

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

回答by Palani Kumar

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

You must assign something to your ng-model attribute, so that it can bind. your code seems to be work. but just display purpose we do this. cheers

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

回答by Rahul

$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 = "";
    }
})

回答by dhaval mashruwala

you need to make use of $watch.It keeps watch on mentioned obeject as soon as value of object change the function of $watch will be called and it will refresh $scope for your code your need to write this:

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

回答by squiroid

You need to use $watch with true

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

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

回答by Rajeshwar

Hope this helps you, please have a look into the plunker

希望这对你有帮助，请查看plunker

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

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)

The above code says, when ever the object 'obj' changes, then the code inside the $watch will execute.

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

回答by RamboNo5

Your code should actually work. See this JSFiddlefor a working demo.

您的代码应该可以正常工作。有关工作演示，请参阅此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>

回答by MEAN Developer

I assume you're using controllerAs syntax and would suggest you do something like this in your controller:

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

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

Then you can drop the value attribute and simply bind to the element via data-ng-model/ng-model.

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