2

ラジオボタンをクリックしたときに $scope.animal を更新するにはどうすればよいですか?

http://plnkr.co/edit/5ikIYfXQw4GyjRKScD7x?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.animals = {
    dog: {
      label: "Dog"
    },
    cat: {
      label: "Cat"
    },
    bird: {
      label: 'Bird'
    }
  };

  $scope.animal = 'dog';
});

HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="(key, val) in animals">
        <label>
          {{val.label}}
          <input type="radio" name="animal" value="{{key}}" ng-model="animal">  
        </label>
      </li>
    </ul>
    <p>Animal: {{animal}}</p>
  </body>

</html>

ラジオ ボタンをクリックすると、クリックした動物の名前が表示されます。

4

1 に答える 1

4

別のスコープを作成するためngRepeat、次のいずれかを使用できます$parent 

<input type="radio" name="animal" value="{{key}}" ng-model="$parent.animal">

またはオブジェクトを使用します。

<input type="radio" name="animal" value="{{key}}" ng-model="animal.name">

コントローラ：

$scope.animal = {
    name : "dog"
};
于 2013-11-15T09:31:02.540 に答える