Question

相当直白，但我对角度很新，而且我觉得我有点生病，所以我有点卡住了：

＆＃13;

// Checkboxes control existence of value in an array

var app = angular.module('myApp', []);

app.controller('MainController', function($scope) {
  $scope.bitMaskFromDB = 5;
  $scope.fruits = [{value:1, label: 'apple'}, {value:2, label:'orange'}, {value:4, label:'pear'}, {value:8, label:'naartjie'}];
 
 
});

app.directive('bitMask', function() {
  return {
    scope: {
      bitMask: '=',
      value: '@'
    },
    link: function(scope, elem, attrs ) {
      var handler = function(setup) {
        if (setup){
 
          var checked = scope.bitMask&scope.value;
          elem.prop('checked', checked);
        }else{
           var checked = elem.prop('checked');
           if (!scope.bitMask&scope.value)
             scope.bitMask |=   scope.value
           //    elem.prop('checked', !checked);
              scope.bitMask ^=   scope.value
           
        }
        console.log ('bit = '+ scope.bitMask)
       
     //   console.log ('value = '+  scope.value)
     //   console.log ('checked ='+ checked)
      };
      
      var setupHandler = handler.bind(null, true);
      var changeHandler = handler.bind(null, false);
            
      elem.on('change', function() {
        scope.$apply(changeHandler);
      });
      scope.$watch('bitMask', setupHandler, true);
    }
  };
});

＆＃13;

<!DOCTYPE html>
<html>
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>
  
  <body ng-app="myApp" ng-controller='MainController'>
    Bitmask checkboxes <br>
    <span ng-repeat="fruit in fruits">
      <input type='checkbox' value="{{fruit.value}}" bit-mask='bitMaskFromDB' > {{fruit.label}}<br />
    </span>
  
    <div>Current value of bitmask: {{bitMaskFromDB }}</div>
    
 
  </body>

</html>

＆＃13;

我未能

1 /正确地将位掩码值更改为复选框值和

2 /显示/绑定值回到控制器

http://plnkr.co/edit/3M8KNyOxMBgPwj9jf01q

Answer 1

你非常亲密我的朋友。

以下是您的修复方法。好吧，我真的不记得他们对此的看法。但是有一些奇怪的行为将原语绑定到范围

updated your plkr

＆＃13;

// Checkboxes control existence of value in an array

var app = angular.module('myApp', []);

app.controller('MainController', function($scope) {
  $scope.IforgetHowTheyExplainThis = {bitMaskFromDB:5};
  $scope.fruits = [{value:1, label: 'apple'}, {value:2, label:'orange'}, {value:4, label:'pear'}, {value:8, label:'naartjie'}];
 
 
});

app.directive('bitMask', function() {
  return {
    scope: {
      bitMask: '=',
      value: '@'
    },
    link: function(scope, elem, attrs ) {
      var handler = function(setup) {
        if (setup){
           console.log ('value1 = '+  scope.value)
          var checked = scope.bitMask&scope.value;
          elem.prop('checked', checked);
        }else{
          console.log ('value2 = '+  scope.value)
           var checked = elem.prop('checked');
           if (!scope.bitMask&scope.value)
             scope.bitMask |=   scope.value
           else
              scope.bitMask ^=   scope.value
           
        }
        console.log ('bit = '+ scope.bitMask)
       
     //   console.log ('value = '+  scope.value)
     //   console.log ('checked ='+ checked)
      };
      
      var setupHandler = handler.bind(null, true);
      var changeHandler = handler.bind(null, false);
            
      elem.on('change', function() {
        scope.$apply(changeHandler);
      });
      scope.$watch('bitMask', setupHandler, true);
    }
  };
});

＆＃13;

<!DOCTYPE html>
<html>
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>
  
  <body ng-app="myApp" ng-controller='MainController'>
    Bitmask checkboxes <br>
    <span ng-repeat="fruit in fruits">
      <input type='checkbox' value="{{fruit.value}}" bit-mask='IforgetHowTheyExplainThis.bitMaskFromDB' > {{fruit.label}}<br />
    </span>
  
    <div>Current value of bitmask: {{IforgetHowTheyExplainThis.bitMaskFromDB }}</div>
    
 
  </body>

</html>

＆＃13;

角度中的位掩码复选框组

1 个答案: