編集のためのAngularJSの再入力チェックボックス -- javascript フィールド と angularjs フィールド と checkbox フィールド 関連 問題

AngularJS repopulating checkboxes for edit












0
vote

問題

日本語

私はAngularjsに慣れており、純粋にサーバー側から魔法が前端のangularjsでリアルタイムで起こるように動かそうとしています。

私は複数の権限を持つことができるユーザーを持っています。新しいユーザーを作成するときは、複数のチェックボックスを選択できます。ユーザーがユーザーの権限に変更を加えたいときにチェックボックスを再配布するのに問題があります。

ここで見つけたチェックリストモデル指令を使用しています。 http://vitalets.github.io /チェックリストモデル/

データベースでは、ユーザー、権限、およびusers_permissionsテーブルを持っています。

usercontroller -laravel

<事前> <コード> public function show($id) { $user = User::with('permissions')->find($id); return $user; }

UserController-angular

<事前> <コード> Users.controller('UserController', ['$scope', '$routeParams', 'User', 'Permission', function($scope, $routeParams, User, Permission) { $scope.user = User.get({ id: $routeParams.id }); $scope.permissions = Permission.query(); }]);

サーバ側のユーザに権限を添付しているため、i <コード> console.log($scope.user)

を取得します。

画像の説明を入力します。

今すぐ

single-user.html

<事前> <コード> <h4>Manage Permissions</h4> <div class="form-group"> <label ng-repeat="permission in permissions"> <input type="checkbox" checklist-model="user.permissions" checklist-value="permission.id" class="checkbox-inline"> {{ permission.display_name }} </label> </div> <button class="btn btn-success" type="submit">Save</button>

$scope.user.permissions.id を含むコントローラに割り当てられた変数を作成し、それらの値を $scope.permissions.id に比較すると、その後チェックボックスをオンにします。

$scope.assigned = $scope.user.permissions.id とconsole.log(割り当て)を作成しようとしたら、未定義に戻ったばかりです。

標準の権限と比較するための割り当てられた権限の配列をどのように作成する方法はわかりません。

英語

I'm new to AngularJS and am trying to move from purely server-side to making the magic happen in real time with AngularJS on the front-end.

I have a user that can have multiple permissions. When creating a new user, you can select multiple checkboxes, all that works fine. I'm having trouble repopulating the checkboxes for when the user wants to make a change to the user's permissions.

I am using the checklist-model directives, found here http://vitalets.github.io/checklist-model/

In the database, I have a users, permissions, and users_permissions tables.

UsersController -Laravel

public function show($id) {     $user = User::with('permissions')->find($id);     return $user; } 

UserController -Angular

Users.controller('UserController', ['$scope', '$routeParams', 'User', 'Permission', function($scope, $routeParams, User, Permission) {     $scope.user = User.get({ id: $routeParams.id });     $scope.permissions = Permission.query(); }]); 

Because I attached the permissions to the user on the server-side, when I console.log($scope.user) I get this object

enter image description here

Now for the view

single-user.html

   <h4>Manage Permissions</h4>     <div class="form-group">         <label ng-repeat="permission in permissions">          <input type="checkbox" checklist-model="user.permissions" checklist-value="permission.id" class="checkbox-inline">             {{ permission.display_name }}         </label>     </div>     <button class="btn btn-success" type="submit">Save</button> 

I thought that I could create an assigned variable in the controller that contained the $scope.user.permissions.id and then compare those values against the $scope.permissions.id and if they matched then check the checkbox.

When I tried to create $scope.assigned = $scope.user.permissions.id and console.log(assigned) then I was just returned undefined.

I'm not sure how to create an array of assigned permissions to compare against the standard permissions, thanks for any advice.

</div
        

回答リスト

0
 
vote
vote
ベストアンサー
 

<コード> User.get および<コード> Permission.query <コード> $resource を使用しているように見えます。これらは(すべてがうまくいけば)データ自体を返すのではなく、データに解決することを約束します。呼び出しは非同期です。そのため、非同期呼び出しが完了したときに呼び出される関数パラメータを渡す必要があります。

undefined $scope.user.permissions.id 、<コード> $scope.user は実際には約束です(あなたが期待していたオブジェクトではなく、$resource10 )。基本的に /* * @abstract Invoked by the preview controller before trying to open an URL tapped in the preview. * @result Returns NO to prevent the preview controller from calling -[UIApplication openURL:] on url. * @discussion If not implemented, defaults is YES. */ - (BOOL)previewController:(QLPreviewController *)controller shouldOpenURL:(NSURL *)url forPreviewItem:(id <QLPreviewItem>)item; 1 は未定義です。

<事前> <コード> /* * @abstract Invoked by the preview controller before trying to open an URL tapped in the preview. * @result Returns NO to prevent the preview controller from calling -[UIApplication openURL:] on url. * @discussion If not implemented, defaults is YES. */ - (BOOL)previewController:(QLPreviewController *)controller shouldOpenURL:(NSURL *)url forPreviewItem:(id <QLPreviewItem>)item; 2

またはあなたはこのようなものを試すことができます(この1つは100%確実ではありません)

<事前> <コード> /* * @abstract Invoked by the preview controller before trying to open an URL tapped in the preview. * @result Returns NO to prevent the preview controller from calling -[UIApplication openURL:] on url. * @discussion If not implemented, defaults is YES. */ - (BOOL)previewController:(QLPreviewController *)controller shouldOpenURL:(NSURL *)url forPreviewItem:(id <QLPreviewItem>)item; 3

/* * @abstract Invoked by the preview controller before trying to open an URL tapped in the preview. * @result Returns NO to prevent the preview controller from calling -[UIApplication openURL:] on url. * @discussion If not implemented, defaults is YES. */ - (BOOL)previewController:(QLPreviewController *)controller shouldOpenURL:(NSURL *)url forPreviewItem:(id <QLPreviewItem>)item; 4 および 998876615

にアクションをチェーンする方法の詳細については、下記を参照してください。
  • > https://docs.angularjs.org/api/ngresource/service/d/a. > $リソース
  • https://docs.angularjs.org/api/ng/service/d / $ Q
 

User.get and Permission.query look like they're using $resource. These will return promises that will (if all goes well) resolve to your data rather than returning the data itself. The calls are asynchronous. So you need to pass a function parameter that gets called when the async calls complete.

When you got undefined during the console.log test, it was because in $scope.user.permissions.id, $scope.user is actually a promise ($q), not the object you were expecting. You were basically evaluating $q.permissions.id, which is undefined.

User.get({ id: $routeParams.id }, function(user) { $scope.user = user; }); Permission.query(function(permissions) { $scope.permissions = permissions; }); 

Or you can try something like this (not 100% sure on this one)

$q.all(     User.get({ id: $routeParams.id });     Permission.query(); ).then(function(user, permissions) { $scope.user = user, $scope.permissions = permissions }); 

See below for more details on how you can chain actions to the User.get() and Permission.query() calls:

  • https://docs.angularjs.org/api/ngResource/service/$resource
  • https://docs.angularjs.org/api/ng/service/$q
</div
 
 
 
 

関連する質問

14  CheckBoxでListPreferenceをどのように作成します  ( How make a listpreference with checkbox ) 
checkbox で<コード> ListPreference を作成する方法 ListPreference の使い方を知っていますが、「繰り返し」設定でアラームアプリケーションのように複数の選択が必要です。 このスクリーンショット: ...

39  テキストラベルをクリックしてチェックボックスをオンにするにはどうすればよいですか。  ( How do i make a checkbox toggle from clicking on the text label as well ) 
<コード> Checkboxes <コード>フォーム formsのは、それらと共に暗黙的ラベルを持っていません。 checkbox を入力しないように明示的なラベル(テキスト)を追加することはありません。 テキストラベルをクリックしてチェックボックスを切...

0  チェックボックスASP MVC  ( Checkbox asp mvc ) 
こんにちは私はASP.NET MVCに新しいです。クリックしたときに値を取得するには、チェックボックスやラジオボタンをどうやって取得する方法がわかりません。誰かが私を助けることができますか?私はあなたが私がそうであることを意味するものを理解するのを助けるかもし...

0  状態をチェックアイテムに保存する方法?  ( How to save the state to a checked item ) 
私はアプリケーションを作っていますが、今私は問題を抱えています。私はアプリケーションを閉じるかどうか、またはデバイスから戻るボタンを押すと、チェックされたボックスがチェックされたままになるようにチェックされています。 これが私のコードです <事前> <...

0  チェックボックスを使用してMySQLデータベースから行を削除します  ( Delete rows from mysql database using checkboxes ) 
MySQLテーブルから生成されたデータをテーブルから削除しようとしています。私はこれらの質問の両方を見た: チェックボックスを使用してデータベース結果の行を削除する方法 チェックボックス、PHP、MySQLを使用して複数行を削除します。私は両方の答えを理解し...

1  MVVM WPFデータバンドチェックボックスは、チェックボックスをオンにしてチェックボックスと未チェックの状態でイベントを発射しません  ( Mvvm wpf databound checkbox wont firing events to the viewmodel for checked and ) 
WPFとMVVMを使用して、 DataGrid の内部にデータバインド<コード> CheckBox を持っています。 <事前> <コード> <DataGridTemplateColumn Width="80" Header="Enabled"> <D...

0  フィルタリングされたリストで空のカテゴリを無効にするためのjQueryを使用する  ( Using jquery to disable empty categories in a filtered listing ) 
私はJavaScript / jQueryにはかなり新しいです。私はULで構造化されたアイテム(この場合はコースオファリング)のリストを持っています。各「コース」はLI要素です。リストは、「データカテゴリ」属性をチェックした後の各リスト項目の可視性を制御してい...

0  チェックボックスの変更方法「チェック」アイコン  ( How to change checkbox checked icon ) 
私は知っているようにチェックボックスは2つの状態だけでなく3. 3つ目の状態にもありますが、3番目の状態はフル埋められたボックスです。チェックボックスに3つの状態がある必要があります。チェックされていない、チェックマーク(デフォルトのように)チェックマークでチ...

0  2つの別々のDIVのクラス名によるjQueryの選択チェックボックス  ( Jquery selecting checkbox by class name in two separate divs ) 
私はここでやろうとしていることのいたずらを作成しました: http://jsfiddle.net/393yk/ < / a> 私は2つの列を持っていて、各列には基本的に、たくさんのチェックボックスがある入れ子になっていないリストのレプリカがあります。 左側の...

7  jQuery検証プラグイン:チェックボックスグループとエラーメッセージの問題  ( Jquery validation plugin checkbox groups and error message issues ) 
jQuery検証プラグインを使用してフォームをまとめており、すべての入力は作業検証とエラーメッセージが正しくありません - チェックボックスを除く。 2つのチェックボックスの問題があります。 最初のものは、検証プラグインAPIがグループ化されたコンテキスト...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有