使用 ng-model 绑定来自无线电输入的对象值答案

【问题标题】：Binding object values from radio input with ng-model使用 ng-model 绑定来自无线电输入的对象值
【发布时间】：2015-11-13 10:00:19
【问题描述】：

我有一个json文件

$scope.favoriteThings = [
    {nr: 1, text: "Raindrops on roses"},
    {nr: 2, text: "Whiskers on kittens"},
    {nr: 3, text: "Bright copper kettles"},
    {nr: 4, text: "Warm woolen mittens"},
    {nr: 5, text: "Brown paper packages tied up with strings"},
    {nr: 6, text: "Cream colored ponies"},
    {nr: 7, text: "Crisp apple streudels"},
    {nr: 8, text: "Doorbells"},
    {nr: 9, text: "Sleigh bells"},
    {nr: 10, text: "Schnitzel with noodles"},
    {nr: 11, text: "Wild geese that fly with the moon on their wings"},
    {nr: 12, text: "Girls in white dresses with blue satin sashes"},
    {nr: 13, text: "Snowflakes that stay on my nose and eyelashes"},
    {nr: 14, text: "Silver white winters that melt into springs"}
  ];

-我正在使用 ng-repeat 指令来重复上述数组。

<li ng-repeat="thing in favoriteThings">
        <input type="radio" value="{{thing}}" ng-model="$parent.selected" name="stuff"/>
          {{thing.text}}
      </li>

- 我将通过选择复选框获得的值显示为 Selected thing: {{selected}}{{selected.nr}}

然后我得到以下输出

Selected thing: {"nr":5,"text":"Brown paper packages tied up with strings"} 要访问 "nr" 属性，我尝试使用 {{selected.nr}} 但这不起作用任何想法为什么？ PLUNKER LINK 编辑：我也想访问 TEXT 属性

【问题讨论】：

标签： javascript angularjs radio-button angularjs-ng-value

【解决方案1】：

只需将你的 html 正文编辑成那样

      <body ng-controller="MainCtrl">
        <ul>
          <li ng-repeat="thing in favoriteThings">
            <input type="radio" value="{{thing.nr}}" ng-model="$parent.selected" name="stuff"/>
              {{thing.text}}
          </li>
        </ul>
        <hr/>
        Selected thing: {{selected}}  {{getText(selected)}}
      </body>

并将此功能添加到您的控制器中

      $scope.getText  = function(_nr){
          var found = $filter('filter')($scope.favoriteThings, {nr: _nr}, true);
          return found[0].text
        }

你可以在这里看到它Plunker

【讨论】：

抱歉我的问题不清楚..我也想访问文本属性

【解决方案2】：

将value 属性替换为ng-value 指令：

 <body ng-controller="MainCtrl">
    <ul>
     <li ng-repeat="thing in favoriteThings">
        <!-- REPLACE interpolated value
        <input type="radio" value="{{thing}}" ng-model="$parent.selected" name="stuff"/>
        -- with the ng-value directive -->
        <input type="radio" ng-value="thing" ng-model="$parent.selected" name="stuff"/>
          {{thing.text}}
      </li>
    </ul>
    <hr/>
    Selected thing: {{selected}}<br>
    Number: {{selected.nr}}<br>
    Text:   {{selected.text}}
  </body>

通过使用插值，value={{thing}}，thing 对象被转换为字符串。 ng-value 指令将 thing 对象保留为对象。

DEMO on PLNKR

【讨论】：