Question

我试图输出以下信息并让它使用角度自动绑定实时更新。第一次和最后一次更新确定，但完全没有像我期望的那样更新。我很感激任何帮助。

http://jsfiddle.net/laurencefass/74u313gx/1/ 要求输出：

first = john
last = doe
full name=john doe.

HTML

<div ng-app="nameApp">
  <div ng-controller="nameController">
    <input ng-model="first"/>
    <p>first = {{first}}</p>
    <input ng-model="last"/>
    <p>last = {{last}}</p>
    <p>full name = {{full}}</p>
 </div>

JS

var app=angular.module("nameApp", []);

app.controller('nameController', function($scope) {
  $scope.first="john";
  $scope.last="doe";
  $scope.full = $scope.first + " " + $scope.last;
});

初始输出似乎正确，并且按预期进行了第一次和最后一次更新。但是尽管是$ scope var并且是第一个和最后一个的产品，但全名不会更新。

Answer 1

由于您在$ scope上定义了一个与多个参数连接的字符串，因此当您更改用于组装它的部件时，它不会自动更改。

如果你想达到你想要的目标，你可以做以下两件事之一：

一：

<p>full name = {{first + ' ' + last}}</p>

二：

<p>full name = {{getFullName()}}</p>

在控制器中有一个功能：

$scope.getFullName = function () {
    return $scope.first + ' ' + $scope.last;
}

Answer 2

以下行只运行一次。所以它是从第一个和最后一个分配的第一个值开始的。

$scope.full = $scope.first + " " + $scope.last;

因此，如果您希望绑定工作，则不会对控制器造成不必要的影响。（保持控制器尽可能干净！）

<div ng-app="nameApp">
  <div ng-controller="nameController">
    <input ng-model="first"/>
     <p>first = {{first}}</p>
     <input ng-model="last"/>
     <p>last = {{last}}</p>
    <p>full name = {{first + ' ' + last}}</p>
  </div>
</div>

看看你的小提琴：

http://jsfiddle.net/74u313gx/2/

如果你真的需要将全名添加到控制器中，你可以使用$ watch：

$scope.$watch('first', updateFull);
$scope.$watch('last', updateFull);
function updateFull(){
    $scope.full = $scope.first + " " + $scope.last;
}

如果您担心效果，您可能希望避免定义很多手表，然后可以使用ng-change：

控制器：

$scope.updateFull = function(){
    $scope.full = $scope.first + " " + $scope.last;
}

查看：

<div ng-app="nameApp">
  <div ng-controller="nameController">
    <input ng-model="first" ng-change="updateFull();"/>
    <p>first = {{first}}</p>
    <input ng-model="last" ng-change="updateFull();"/>
    <p>last = {{last}}</p>
    <p>full name = {{full}}</p>
 </div>

Answer 3

它不会自动更新，因为你在串联后传递一个字符串它会返回简单的字符串而不是一个angular var，你需要执行以下操作来自动更新值。

 $scope.$watchGroup(["first","last"],function(){
     $scope.full = $scope.first + " " + $scope.last;
  });

Answer 4

更新您的代码，如下所示：

查看更新

<div ng-app="nameApp">
<div ng-controller="nameController">
<input ng-model="first" ng-change="change()"/>
 <p>first = {{first}}</p>
 <input ng-model="last" ng-change="change()" />
 <p>last = {{last}}</p>
<p>full name = {{full}}</p>

脚本更新

var app=angular.module("nameApp", []);


app.controller('nameController', function($scope) {
    $scope.first="john";
    $scope.last="doe";
    $scope.full = $scope.first + " " + $scope.last;
    $scope.change= function(){
       $scope.full=$scope.first + " " + $scope.last;
    }
});

如上所示，我使用ng-change指令更改/更新视图页面输入元素，并为namecontroller w.r.t.nameApp模块创建相同的范围函数。希望它可以帮助你!!!

角度双向动态约束问题

4 个答案: