Question

我有两个版本的代码，一个不工作，另一个不工作。我的问题是“为什么不工作的人不工作？” 这是JSfiddle http://jsfiddle.net/fhjF7/

无效版本：控制器：

function Ctrl($scope) {
    $scope.username = "username";
    $scope.users = [ "Matteo", "Marco", "Michele" ];
};

HTML：

<h1> Not working example</h1>
<div ng-controller="Ctrl">
    <div ng-repeat="user in users">
        <input type="radio" ng-model="username" name="usern" ng-value="user" />
        <strong>{{user}}</strong>
    </div>
    <div>selected: {{username}}</div>
</div>

这是工作的，它几乎完全相同，但用对象替换字符串变量：控制器：

function usersCtrl($scope) {
    $scope.names = {username: "username"};
    $scope.users = [ "Matteo", "Marco", "Michele" ];
};

HTML：

<h1> Working example</h1>
<div ng-controller="usersCtrl">
    <div ng-repeat="user in users">
        <input type="radio" ng-model="names.username" name="username" ng-value="user" />
        <strong>{{user}}</strong>
     </div>
     <div>selected: {{names.username}}</div>
</div>

Answer 1

这是因为javascript管理函数参数的方式。

理解它的简单方法是String，Number和Boolean参数总是由Value发送，而Objects和Functions总是由byRef发送，这就是为什么当你在ng-model中使用dot时它意味着你在做什么对将要传播的对象的引用，如果您不在ng-model中使用点，则引用String，Number或Boolean，它实际上是实变量的副本。

此处提供了更多信息https://egghead.io/lessons/angularjs-the-dot和https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 2

Ng-repeats创建自己的隔离范围，这就是为什么字符串没有被保留，因为它没有通过引用传递。如果要更新模型，请使用

<input type="radio" ng-model="$parent.username" name="usern" ng-value="user" />

$ parent允许您访问ng-repeat之外的父范围，并且应该是您想要的范围。

Answer 3

您工作代码的答案：http://jsfiddle.net/ashuslove/fhjF7/30/

HTML：

 <h1> Not working example</h1>
    <div ng-controller="Ctrl">
         <div ng-repeat="user in users">
              <input type="radio" ng-model="names.usern" name="usern" ng-value="user" />
              <strong>{{user}}</strong>
          </div>
          <div>selected: {{names.usern}}</div> //Changed line here
    </div>

功能：

  function Ctrl($scope) {
                $scope.names = {usern: "usern"};  //Also need to change this
                $scope.users = [ "Matteo", "Marco", "Michele" ];
            };

angularjs数据绑定不起作用于字符串变量？

3 个答案: