AngularJS - ngmodel在ngrepeat不更新（'点'ngmodel） [英] AngularJS - ngmodel in ngrepeat not updating ('dotted' ngmodel)

问题描述

我试图绘制角阵列选项框，之后得到检查收音机的价值，但模式不改变你的价值，任何人都可以帮我这个？

HTML部分

 ＆LT; D​​IV NG-应用＆GT;
    ＆LT; D​​IV NG控制器=CustomCtrl＆GT;
        ＆LT;标签NG重复=用户用户＆GT;
            ＆LT;输入类型=电台NAME =无线电NG模型=无线电VALUE ={{user.name}}/＆GT; {{用户名}}
        ＆LT; /标签＆gt;
        ＆LT; BR /＆GT;
        {{无线电}}
        ＆LT; BR /＆GT;
        ＆LT; A HREF =JavaScript的：无效（0）NG点击=saveTemplate（）＆GT;保存＆LT; / A＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

折角部分

 函数CustomCtrl（$范围）{
    $ scope.radio =约翰;
    $ scope.users = [
        {名：约翰，年：18}，
        {名：托尼，年：19}
    ];    $ scope.saveTemplate =功能（）{
        的console.log（$ scope.radio）;
    };
}
 

您可以在这里看到的例子 - http://jsfiddle.net/hgf37bo0/2/

解决方案

您需要设置 $ scope.radio 是这样一个对象：

  $ scope.radio = {
  名称：'约翰'
}
 

，然后从HTML访问它像这样：

 ＆LT;输入类型=电台NAME =无线电NG模型=radio.nameVALUE ={{user.name}}/＆GT;
 

这里的工作的jsfiddle

您可以为什么这是必要的，这回答读了

从angularjs 文档：

  

继承范围通常是简单的，你经常甚至不需要知道它正在发生......直到你尝试2路数据绑定（即表单元素，NG-模型）为原始（例如，数，字符串，布尔）从孩子域内父范围界定。它不工作的方式大多数人期望它应该工作。什么情况是，孩子得到的范围自有物业，隐藏/阴影的同名parent属性。这不是AngularJS正在做 - 这是原型继承如何JavaScript的工作

  
  

...

  
  

有一个。在您的模型将确保原型继承中发挥作用。因此，用

 ＆LT;输入类型=文本NG模型=someObj.prop1＆GT;
 

  

而不是

 ＆LT;输入类型=文本NG模型=为prop1＆GT;
 

  

如果你真的想/需要使用原始的，有两种解决方法：

  
  

使用$ parent.parentScopeProperty在孩子的范围。这将prevent
  从创建自有物业子范围。在定义一个函数
  父范围，并从子调用它，通过原始
  值到父（并不总是可能的）

i'm trying to draw radioBoxes with angular array, and after that get value of checked radio, but model don't change its value you, can anyone help me with this ?

HTML part

<div ng-app>
    <div ng-controller="CustomCtrl">
        <label ng-repeat="user in users">
            <input type="radio" name="radio" ng-model="radio" value="{{user.name}}" /> {{user.name}} 
        </label>
        <br/>
        {{radio}}
        <br/>
        <a href="javascript:void(0)" ng-click="saveTemplate()">Save</a>
    </div>
</div>

Angular Part

function CustomCtrl($scope) {
    $scope.radio = "John";
    $scope.users = [
        {"name" : "John", "Year" : 18},
        {"name" : "Tony", "Year" : 19}
    ];

    $scope.saveTemplate = function() {
        console.log($scope.radio);
    };
}

you can see example here - http://jsfiddle.net/hgf37bo0/2/

解决方案

you need to set $scope.radio to be an object like this:

$scope.radio = {
  name: 'John'
}

and then access it from html like so:

<input type="radio" name="radio" ng-model="radio.name" value="{{user.name}}" />

here's a working jsfiddle

You can read up on why this is necessary in this answer

from angularjs docs:

Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope. It doesn't work the way most people expect it should work. What happens is that the child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works.

...

Having a '.' in your models will ensure that prototypal inheritance is in play. So, use

<input type="text" ng-model="someObj.prop1"> 

rather than

<input type="text" ng-model="prop1">

If you really want/need to use a primitive, there are two workarounds:

Use $parent.parentScopeProperty in the child scope. This will prevent the child scope from creating its own property. Define a function on the parent scope, and call it from the child, passing the primitive value up to the parent (not always possible)

这篇关于AngularJS - ngmodel在ngrepeat不更新（'点'ngmodel）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！