javascript.md

javascript.md

Array slice vs splice

this will remove 1 item at index 4.

arr.splice(4, 1)

this will return elements in position 0 through 4.

arr.slice(0,5)

####Array get difference returns the values from array that are not present in the other arrays.

['1','2','3'].filter(function(e){
  return (otherArray.indexOf(e)===-1);
})

####Copy of array of Object

var a = [{f: 1}, {f:5}, {f:10}];
var b = _.map(a, _.clone);

Call a function from String

//
// exec('my.namespace.functionName',context,args);
function exec(functionNameStr, context , args ) {
  var args = [].slice.call(arguments).splice(2);
  var namespaces = functionName.split(".");
  var func = namespaces.pop();
  for(var i = 0; i < namespaces.length; i++) {
    context = context[namespaces[i]];
  }
  return context[func].apply(context, args);
}

• source

####AngularJS controller inherit from another contoller

app.controller('ChildCtrl', function($scope, $controller) {
  $controller('ParentCtrl', {$scope: $scope}); 
});

Angular filter null, undefined or empty string

'!!' filters out objects having a certain property or objects having a certain property that is not undefined or null:

<div ng-repeat="item in items | filter : { property : '!!' }">
</div>

'!' filters out objects not having certain property or objects having a certain property that is undefined or null:

<div ng-repeat="item in items | filter : { property : '!' }">
</div>

filters out objects not having certain property that is an empty string '':

<div ng-repeat="item in items " ng-if="item.property">
</div>

####Angular select tracked by object field

<select  ng-model="product.categories " 
         ng-model="product.categories"
         ng-options="i.name for i in category.findAll()| filter:{type:'Category'} track by i._id"
         class="form-control input-lg" required ></select>

####Angular select tracked option for simple array

<select class="form-control pull-right " style="width:50%" 
        ng-model="model.shop" 
        ng-options="shop as shop for shop in shops track by shop">
        <option value=""  selected>-- Toutes les boutiques</option>
</select>                        

####Angular directives

app.directive('someDirective', function () {
  return {
    scope: {
      oneWay: '@',
      twoWay: '=',
      expr: '&'
    }
  };
});

Binding to controllers with bindToController That means, Angular makes sure that, when the controller is instantiated, the initial values of the isolated scope bindings are available on this, and future changes are also automatically available.

app.directive('someDirective', function () {
  return {
    scope: {
      name: '='
    },
    controller: function () {
      this.name = 'Pascal';
    },
    controllerAs: 'ctrl',
    bindToController: true,
    template: '<div>{{ctrl.name}}</div>'
  };
});

Angular $compile, $parse or $interpolate

These services are mainly used to evaluate expression and rendering UI.

$compile: This service converts a html string in a fully functional DOM element.

var html = '<div ng-click='clickme();'>{{text}}</div>';
$compile(html)($scope);

$interpolate : This service is used to evaluate angular expressions.

var string = 'My Name is {{name}}';
$scope.name = 'Manish';
$interpolate(string)($scope); //this will result in My Name is Manish

$parse : This service is used as a getter/setter for single variables only.

$scope.text = 'abc';
$parse('text')($scope);  //this will result in abc
$parse('text').assign($scope,'xyz');