Question

我是Angular的新手，在尝试让ng-model显示对象值时无法弄清楚我做错了什么。

目标：

我想创建一个读取Object的指令，并根据Object数据生成单选按钮。在这个对象的内部我有{logAs：＆＃39; radioGroupName＆＃39;}。这应该存储在另一个名为formData的对象中。

示例：

{logAs: 'dog', options: [{option: 'poodle'}, {option: 'pitbull'}]}

这应该创建两个单选按钮，一个用于pittbull，另一个用于poodle。两者都应该将ng-model设置为dog。如果用户选择Poodle，那么formData Object中的最终输出应为：

{dog: 'poodle'}

问题：

我相信我很接近，除了ng-model之外，一切都很好。在ng-model中，实际的Object值（dog）不会像我一样出现，而是获得我输入的Object路径。

这是我的HTML：

<div ng-app="test">
  <div ng-controller="myController">
    <p>formData: {{formData}}</p>
    <h3>Static (updates formData)</h3>
    <input type="radio" ng-model="formData.dog" value="pitbull"> Pitbull<br/>
    <input type="radio" ng-model="formData.dog" value="Bull Dog"> Bull Dog<br/>
    <input type="radio" ng-model="formData.dog" value="Poodle"> Poodle

    <h3>Dynamic (wont update formData)</h3>
    <directive form="formInfo"></directive>
  </div>

这是Javascript：

angular.module('test', [])
.controller('myController', function($scope){
    $scope.formData = {};
  $scope.formInfo = {
    title: 'What type of dog do you have?',
    logAs: 'dog',
    options: [{option:'Pitbull'}, {option: 'Bull Dog'}, {option:'Poodle'}]
  }
})

.directive('directive', function(){
    return {
    restrict: 'E',
    template: '{{form.title}}<div ng-repeat="option in form.options"> <input type="radio" ng-model="form.logAs" value="jack" > {{option.option}}</div>',
    scope: {
        form: '='
    }

  }
});

如何让ng-model显示对象的输出（＆＃39; dog＆＃39;）而不是对象路径？ 这是fiddle

Answer 1

在你的小提琴中，这是因为在你的html的第3行，{{formData}}应该是{{formData.dog}}

如何从指令内动态更新ng-model？

1 个答案: