angularjsに選択度が適用されました

selectivityを使って要素を選択しようとしましたが、これはangularjsコントローラを使ってオプションをレンダリングします。問題は、角度がテンプレートにオプションを渡す前に選択性が適用されることです。プロトコルでは、選択性スタイリングは静的オプションでうまく動作しますが、データバインディングではなく、静的オプションはまったく解決策ではありません。angularjsに選択度が適用されました

HTML

<select id="roleIds" name="roleIds[]" ng-options="role.name for role in roles track by role.id" ng-model="selected_roles" multiple></select>

angularjs

$http 
({ 
    method: "GET", 
    url: url, 
    isArray: true 
}).then 
(
    function(response) 
    { 
     $scope.name = response.data.name; 
     $scope.email = response.data.email; 
     $scope.roles = response.data.roles; 
     $scope.selected_roles = response.data.selected_roles; 
     $scope.selected_accesses = response.data.selected_accesses; 
     $scope.accesses = response.data.accesses; 

     jQuery('#roleIds').selectivity({ 
      multiple: true, 
      tokenSeparators: [' '] 
     }); 
    } 
);

どのように私はこれを達成することができますか？ angularjsを使ってデータを扱いながら素敵なマルチセレクションが可能ですか？

出典

2016-08-15 Nikolay

Angularディレクティブを作成し、ディレクティブのリンク機能で選択性を適用することができます。選択した要素のhtmlテンプレートにディレクティブを追加できます。ロールは後で更新して取得できるので、私はロールオブジェクトにウォッチを追加しました。

angular.module("app", []); 
 
angular.module("app").controller("SelectivityCtrl", function($scope, $timeout) { 
 

 
    var roles = [{ 
 
    id: 1, 
 
    name: "test" 
 
    }, { 
 
    id: 2, 
 
    name: "blah" 
 
    }, { 
 
    id: 3, 
 
    name: "third" 
 
    }]; 
 
    $timeout(function() { 
 
    $scope.roles = roles; 
 
    $scope.selected_roles = []; 
 
    }, 1000); 
 
}); 
 
angular.module("app").directive("jSelectivity", function() { 
 
    return { 
 
    restrict: 'A', 
 
    require: 'ngModel', 
 
    scope: { 
 
     jSelectivity: "<" 
 
    }, 
 
    link: function(scope, elem, attr, modelCtrl) { 
 
     scope.$watch("jSelectivity", function(newValue, oldValue) { 
 
     if (newValue !== oldValue) { 
 
      var test = jQuery(elem).selectivity({ 
 
      multiple: true, 
 
      tokenSeparators: [' '] 
 
      }); 
 
      $(test).on('change', function(e) { 
 
      modelCtrl.$setViewValue($('#roleIds').selectivity('data')); 
 
      modelCtrl.$render(); 
 
      }); 
 
     } 
 

 
     }); 
 
    } 
 
    } 
 
});

<link href="https://arendjr.github.io/selectivity/stylesheets/selectivity-jquery.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://arendjr.github.io/selectivity/javascripts/selectivity-jquery.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="SelectivityCtrl"> 
 
    <select id="roleIds" name="roleIds[]" ng-options="role.name for role in roles track by role.id" ng-model="selected_roles" multiple j-selectivity="roles"></select> 
 
    <p>{{selected_roles|json}}</p> 
 
    </div> 
 

 
</body>

更新：

私は意志が、私たちは適切にモデルデータを更新することができ、新たな選択divの上のonChangeイベントハンドラを追加しました。私は、選択性の機能を包むカスタムAngular指示文を書くことをお勧めします。これにより、よりユーザーフレンドリーなデザインとコードが可能になります。

出典

2016-08-15 17:46:10 10100111001

さて、選択性が適用されましたが、すべてのangularjsディレクティブが消去され、selectのオプションはデータバインドされません。これは静的selectのようです。 – Nikolay

私が提供したコードは単なる例です。投稿のコードに表示されているように、コードを保持し、APIからロールやその他の詳細を取得する必要があります。 – 10100111001

はい、それはまさに私がやったことでした。選択項目には適切なオプションが選択されていますが、コントローラーとは**データバインドされていません**。私がselect要素を調べると、 'ng-model = "selected_roles"'のようなangularjs指示文は選択性によって一掃されます。たとえば、オプションの1つを選択解除すると、コントローラの$ scope.selected_rolesの値に変更が適用されないため、フォームを送信してもデータベースに何も変更はありません。これらのディレクティブをディレクティブの** link **関数などの属性として追加する必要がありますか？ – Nikolay

angularjsに選択度が適用されました

答えて

関連する問題