AngularJS - ngmodel в ngrepeat не обновляется ('dotted' ngmodel)

Question

Я пытаюсь нарисовать радиобокс с угловым массивом, а после этого получить значение проверенного радио, но модель не меняет его значение, может кто-нибудь мне помочь с этим ?

HTML часть

<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> 

Угловая часть

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

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

вы можете увидеть пример здесь - http://jsfiddle.net/hgf37bo0/2/

Answer 1

вам необходимо установить $scope.radio быть объектом, как это:

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

, а затем получить доступ к нему из HTML следующим образом:

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

вот работает jsfiddle

Вы можете прочитать о том, почему это необходимо в этом answer

из angularjs docs:

Наследование области обычно просто, и вам часто даже не нужно знать, что это происходит ... пока вы не попробуете двухсторонние данные bindi ng (т. е. элементы формы, ng-model) в примитиве (например, number, string, boolean), определенных в родительской области изнутри дочерней области. Это не работает так, как многие ожидают, что он должен работать. Случается, что дочерняя область получает свое собственное свойство, которое скрывает/затеняет родительское свойство с тем же именем. Это не то, что делает AngularJS - так работает прототипное наследование JavaScript.

...

Наличие '.' в ваших моделях будет гарантировать, что прототипное наследование находится в игре. Таким образом, использование

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

вместо

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

Если вы действительно хотите/нужно использовать примитивные, есть два пути:

Использование $ родителей .parentScopeProperty в области содержимого. Это предотвратит создание дочернего объекта собственного свойства. Определим функцию на родительской области, и называют его от ребенка, передавая примитив значение до родителя (не всегда возможно)