AngularJS 表达式不会在输入的值字段中进行评估答案

【问题标题】：AngularJS Expression Won't Evaluate in Value Field of InputAngularJS 表达式不会在输入的值字段中进行评估
【发布时间】：2014-08-11 21:07:50
【问题描述】：

AngularJS 中看似简单的事情对我不起作用，我希望大家能提供帮助。具体来说，我试图在另一个输入的“值”属性中输入 AngularJS 表达式的结果。我已经设置了 ng-model 并正确调用了它们，只是无法弄清楚为什么它不会评估。我尝试在输入下方执行相同的表达式，并且它会评估，所以我认为这与导致问题的 value 属性有关。我目前拥有的代码是：

<div class="row-fluid">
    <div class="span4">
        <label for="employeeID">Employee ID</label>
        <input type="text" class="input-block-level" id="employeeID" for="employeeID" placeholder="ANS1235482" ng-model="createNewUser.EmployeeId">
    </div>
    <div class="span4">
        <label>First Name</label>
        <input type="text" class="input-block-level" placeholder="Johnathan" ng-model="createNewUser.FirstName">
    </div>
    <div class="span4">
        <label>Last Name</label>
        <input type="text" class="input-block-level" placeholder="Smith" ng-model="createNewUser.LastName">
    </div>
</div>
<div class="row-fluid">
    <div class="span4">
        <label for="username">Username</label>
        <input type="text" class="input-block-level" placeholder="JohnathanSmith" value="createNewUser.LastName" >
    </div>
    <div class="span4">
        <label>Password</label>
        <input type="password" class="input-block-level" placeholder="***************">
    </div>
    <div class="span4">
        <label>Role</label>
        <select class="input-block-level">
            <option value="user">User</option>
            <option value="admin">Administrator</option>
        </select>
    </div>
</div>

理想情况下，我想弄清楚如何使用数据绑定来获取名字的第一个字母和完整的姓氏的用户名以自动填充，但此时我什至无法只需使用标准的名字 + 姓氏即可。

您能提供的任何帮助将不胜感激。

谢谢！

【问题讨论】：

标签： javascript angularjs data-binding

【解决方案1】：

<input type="text" class="input-block-level" placeholder="JohnathanSmith" ng-value="un" >

使用 ng-change 指令。

var app = angular.module("app", []);
app.controller("myCtrl", ["$scope", function ($scope){
  $scope.fn = "";
  $scope.ln = "";

  $scope.changed = function () {
    $scope.un = $scope.fn[0] + $scope.ln;
  };

}]);

DEMO

【讨论】：

有道理，但仍无法评估。不过谢谢！
我正在尝试创建演示，所以请给我几分钟。
谢谢。我很感激@dasu908

【解决方案2】：

请使用 ng-value 代替 value

这里演示：http://jsbin.com/zamih/1/edit

<body ng-app="app">
  <div ng-controller="firstCtrl">
<div class="row-fluid">
    <div class="span4">
        <label for="employeeID">Employee ID</label>
        <input type="text" class="input-block-level" id="employeeID" for="employeeID" placeholder="ANS1235482" ng-model="createNewUser.EmployeeId">
    </div>
    <div class="span4">
        <label>First Name</label>
        <input type="text" class="input-block-level" placeholder="Johnathan" ng-model="createNewUser.FirstName">
    </div>
    <div class="span4">
        <label>Last Name</label>
        <input type="text" class="input-block-level" placeholder="Smith" ng-model="createNewUser.LastName">
    </div>
</div>
<div class="row-fluid">
    <div class="span4">
        <label for="username">Username</label>
        <input type="text" class="input-block-level" placeholder="JohnathanSmith" ng-value="createNewUser.LastName" >
    </div>
    <div class="span4">
        <label>Password</label>
        <input type="password" class="input-block-level" placeholder="***************">
    </div>
    <div class="span4">
        <label>Role</label>
        <select class="input-block-level">
            <option value="user">User</option>
            <option value="admin">Administrator</option>
        </select>
    </div>
</div>
      </div>
</body>

【讨论】：

这是有道理的，遗憾的是它仍然没有在我的代码中进行评估。
嗯，所以如果这样有效，那么我想知道为什么它对我不起作用 =\ — 是时候开始拆开东西来寻找原因了

【解决方案3】：

改变这一行：

<div class="span4">
  <label for="username">Username</label>
  <input type="text" class="input-block-level" 
         placeholder="JohnathanSmith" value="createNewUser.LastName" >
</div>

改为：

<div class="span4">
  <label for="username">Username</label>
  <input type="text" class="input-block-level" 
         placeholder="JohnathanSmith" value="{{createNewUser.LastName}}" >
</div>

您的问题是您没有将createNewUser.LastName 评估为角度绑定，而只是将文本“createNewUser.LastName”分配给value 属性。要解决此问题，请将 createNewUser.LastName 变量放在双花括号 {{...}} 中。

希望这会有所帮助！

【讨论】：

这很有道理，但出于某种原因，它并没有像看起来应该的那样评估

【解决方案4】：

如果您已尝试上述任何/所有这些方法，但仍无法解决您的问题，则可能是您的更新文件未加载到 Chrome。这就是发生在我身上的事。

有两种方法可以确保你的js文件在浏览器上是最新的，

1) 在单击浏览器的重新加载按钮时按住 shift

2) 硬重新加载您的页面

 * Open Developer Tools by either pressing F12 or ... -> More Tools -> Developer Tools
 * Right-click the reload button of your browser and click "Empty Cache and Hard Reload"

【讨论】：