Question

我是Angular的新手。我正在尝试一些演示程序并遇到问题。

这是我的HTML代码。我使用的是名为myDom的控制器和应用<!DOCTYPE html> <html> <head> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src = "dom.js"></script> <title>Angular Dom Management</title> </head> <body> <div ng-app="myDom" ng-controller="domController"> <input type="textbox" ng-model="first_name"></input> <input type="textbox" ng-model="last_name"></input> <span>{{myName}}</span> </div> </div> </body> <script type="text/javascript"> </script> </html>。

dom.js

这是我在var myDom = angular.module('myDom',[]); myDom.controller('domController', ['$scope', function($scope){ $scope.first_name = "Rock"; $scope.last_name = "Star"; $scope.myName = $scope.first_name +" "+$scope.last_name; }]);文件中编写的控制器脚本。

{{myName}}

我的问题是当我在浏览器中打开它时，绑定Rock Star会将正确的值显示为{{1}}。但是当我更改输入字段中的值时，值不会改变。

Answer 1

$scope.myName是您的名字加载的串联 - myName不是观看值，不会立即更新 - 您需要添加watch或ngChange并不断更新。

解决方案一：使用视图连接：

<span>{{first_name + " " + last_name}}</span>

解决方案二：添加ngChange

$scope.nameUpdated = function() {
    $scope.myName = $scope.first_name +" "+$scope.last_name;
}

<input type="textbox" ng-change="nameUpdated()" ng-model="first_name"></input>
<input type="textbox" ng-change="nameUpdated()" ng-model="last_name"></input>

Answer 2

尝试这种方式：

$scope.myName = function () {
    return $scope.first_name +" "+$scope.last_name
};

HTML：

<span>{{myName()}}</span>

Answer 3

控制器中的表达式

apple-app-site-association

当您稍后更改

$scope.myName = $scope.first_name +" "+$scope.last_name;

或$scope.first_name时，

不会神奇地更新。实际上它与Angular无关。您可以手动设置花样

$scope.last_name

但这个马马虎虎的解决方案。我会创建一个getter，没有Angular，只有纯JS：

$scope.$watchGroup(['first_name', 'last_name'], function() {
  $scope.myName = $scope.first_name +" "+$scope.last_name;
});

Answer 4

那是因为您没有更改$scope.myName字段。它是在开始时计算的，不会改变。

尝试以下方法：

<body>
    <div ng-app="myDom" ng-controller="domController">
        <input type="textbox" ng-model="first_name"></input>
        <input type="textbox" ng-model="last_name"></input>
        <span>{{first_name + " " + last_name}}</span>
    </div>
</body>

角度绑定不会发生

4 个答案: