11

Project サービスを介して公開された一連のプロジェクトがあるとします。

{ id: '123', name: 'Yeoman', watchers: '1233', ... }
{ id: '123', name: 'Grunt', watchers: '4343', ... }

次に、お気に入りのプロジェクトを選択するためのフォームがあります。

Select favorite project:
%label.radio(ng-repeat="project in Project.query()")
  %input(type="radio" ng-model="data.favoriteProject" value="{{project.id}}") {{project.name}}

これにより、choices.favoriteProject が選択したプロジェクトの id 値に設定されます。多くの場合、id だけでなく、関連するオブジェクトにアクセスする必要があります。

John's favorite project:
{{Project.get(data.favoriteProject).name}}

私が探しているのは、ラジオとチェックボックスをIDではなくオブジェクト自体に直接バインドする方法です。

John's favorite project:
{{data.favoriteProject.name}}

代わりは。これは ng-options を介した select ディレクティブで可能ですが、ラジオとチェックボックスでこれを行うにはどうすればよいでしょうか? 可能であれば、参照の代わりに一致する ID を使用したいと思います。

明確にするために、ここに私が探している例があります

Select favorite project:
%label.radio(ng-repeat="project in Project.query()")
  %input(type="radio" ng-model="data.favoriteProject" value="{{project}}" ng-match="id") {{project.name}}

「data.favoriteProject を実際のプロジェクト オブジェクトにバインドし、id を使用して (参照の代わりに) 一致するかどうかを確認してください」と表示されます。

4

2 に答える 2

15

[アップデート]

ngValue文書化されていないように見えるディレクティブを発見した後、私は答えを完全に変更しました。ngModelラジオボタン入力の値として、文字列だけでなくオブジェクトをバインドできます。

<label ng-repeat="project in projects">
  <input type="radio" ng-model="data.favoriteProject"
    ng-value="project">{{project.name}}</input>
</label>

<p>Your favorite project is {{data.favoriteProject.name}}.</p>

これはIDだけでなく参照を使用してチェックしますが、ほとんどの場合、これは人々が探しているものだと思います。IDに基づいて厳密に照合する場合は、以下の[Old Answer]を使用するか、関数を作成するだけです。たとえば、projectById(projectId) IDに基づいてプロジェクトを検索するために使用できます。

JSFiddleを更新してデモンストレーションしました：http：//jsfiddle.net/BinaryMuse/pj2GR/

【旧回答】

ng-changeおそらく、ラジオボタンディレクティブの属性を利用して、目的を達成することができます。このHTMLを検討してください。

<p>Select your favorite project:</p>
<label ng-repeat="project in projects">
  <input type="radio" ng-model="data.favoriteProjectId" value="{{project.id}}"
         ng-change="data.favoriteProject = project">
    {{project.name}}
  </input>
</label>

<p>Your favorite project is {{data.favoriteProject.name}}.</p>

ng-changeたとえば、内部で関数を呼び出すこともできますがsetfavoriteProject(project)、簡単にするために、ここでは呼び出しませんでした。

テクニックを示すために動作するjsFiddleは次のとおりです。http：//jsfiddle.net/BinaryMuse/pj2GR/7/

于 2013-01-16T06:20:43.240 に答える
1

ng-change は必要ありません (また、このようなインライン コードを記述することが適切な方法であるかどうかはわかりません。一方、angular ディレクティブはそれ自体からそれほど離れていません)。このようなことをしてみませんか (ng-repeat でも動作します):

フィドル: http://jsfiddle.net/JohannesJo/VeZxh/3/

コード：

<body ng-app="app">
<div ng-controller='controller'>
<input type = "radio" ng-model = "oSelected"  value = "{{aData[0]}}">
<input type = "radio" ng-model = "oSelected"  value = "{{aData[1]}}">
<div>test:     {{oSelected}}</div>
</div>
</body>


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

app.controller('controller', function($scope){
$scope.aData = [
    {o:1},
    {o:2}
];
$scope.oSelected = {};
});

編集：値がtrueまたはfalseになるため、これはチェックボックスでは機能しないことに言及する必要があるかもしれません。また、共有モデルでは、すべてのチェックボックスが同時にオンまたはオフになります。

于 2013-02-28T21:08:58.963 に答える