Question

是否可以将input的值绑定到另一个input的值？以下是行不通的：

<input ng-model="val">
<input value="Hello {{val}}">

Answer 1

这是一个简单的解决方案：http://plnkr.co/edit/7HxnM3O1UE1RxCCPvvJ0?p=preview

<强> app.js

app.controller('MainCtrl', function($scope) {
    $scope.formatText = function() {
        return "Hello " + $scope.text;
    };

    $scope.$watch('text', function(newValue) {
        $scope.formatedText = "Hello "+ (newValue ? newValue : "");
    })
});

<强>的index.html

<body ng-controller="MainCtrl">
    <input type="text" ng-model="text"/>
    <input type="text" ng-model="formatedText"/>
</body>

对于更常见的方式，您可以使用$ scope。$ eval和您自己的指令。

Answer 2

对于您发布的简单用例，您可以使用点表示法。

小提琴示例Fiddle

<input ng-model="new.val">
<input value="Hello {{new.val}}">

通过使用dot.notation，可以避免与范围问题发生冲突并与全局命名空间冲突。不知道所涉及的所有变量可能是问题。

任何$ scope.val会干扰。

<input ng-model="val">
<input value="Hello {{val}}">

通过使用点符号和深层链接，您可以避免许多常见问题。

Answer 3

是。这是working plunker代码。

JS：

var myApp = angular.module('myApp', []);


myApp.controller('Ctrl', function($scope) {

  $scope.val = 'Guy';

  });

HTML：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="Ctrl">
    <h1>Hello Plunker!</h1>

    <input ng-model="val">
    <input value="Hello {{val}}">
  </body>

</html>

*注意：除非您要初始化其值，否则不需要将val添加到控制器。

Angular JS - 来自另一个输入值的输入值

3 个答案:

JS：

HTML：