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

时间:2014-08-11 21:07:51

标签: javascript angularjs data-binding

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>

理想情况下,我想弄清楚如何获取第一个字母的第一个字母的用户名和使用数据绑定自动填充的完整姓氏,但此时我甚至无法得到标准的名字+姓氏。

非常感谢您提供的任何帮助。

谢谢!

4 个答案:

答案 0 :(得分:2)

<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

答案 1 :(得分:1)

请使用ng-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>

答案 2 :(得分:1)

更改此行:

<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变量放在双花括号{{...}}中。

希望这有帮助!

答案 3 :(得分:0)

如果您尝试了上述任何/所有方法,但仍无法解决问题,则可能是您的更新文件未加载到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"