ngValue

http://docs.angularjs.org/api/ng.directive:ngValue

概要
使用方法
デモ

概要

与えられた式を、input[select]またはinput[radio]に紐付け、要素が選択された際に、要素のngModelに紐付けた値を設定します。

ngValueは、下記の例のようにng-repeatを使用して動的にラジオボタンのリスト生成する際に便利です。

使用方法

<input ng-value="{string}">
   ...
</input>

引数

引数説明

ngValue(optional)

引数	説明
ngValue(optional)	型：`string` input要素のvalue属性に紐付けられるAngular式を指定します。

型：string

input要素のvalue属性に紐付けられるAngular式を指定します。

デモ

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <form ng-controller="Ctrl">
      <h2>Which is your favorite?</h2>
        <label ng-repeat="name in names" for="{{name}}">
          {{name}}
          <input type="radio"
                 ng-model="my.favorite"
                 ng-value="name"
                 id="{{name}}"
                 name="favorite">
        </label>
      </span>
      <div>You chose {{my.favorite}}</div>
    </form>
  </body>
</html>

function Ctrl($scope) {
  $scope.names = ['pizza', 'unicorns', 'robots'];
  $scope.my = { favorite: 'unicorns' };
}

it('should initialize to model', function() {
  expect(binding('my.favorite')).toEqual('unicorns');
});
it('should bind the values to the inputs', function() {
  input('my.favorite').select('pizza');
  expect(binding('my.favorite')).toEqual('pizza');
});

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<script>function Ctrl($scope) {
  $scope.names = ['pizza', 'unicorns', 'robots'];
  $scope.my = { favorite: 'unicorns' };
}
</script>
  </head>
  <body>
    <form ng-controller="Ctrl">
      <h2>Which is your favorite?</h2>
        <label ng-repeat="name in names" for="{{name}}">
          {{name}}
          <input type="radio"
                 ng-model="my.favorite"
                 ng-value="name"
                 id="{{name}}"
                 name="favorite">
        </label>
      </span>
      <div>You chose {{my.favorite}}</div>
    </form>
  </body>
</html>

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。