logo
down
shadow

AngularJS: how to activate first non zero item in ngRepeat?


AngularJS: how to activate first non zero item in ngRepeat?

By : user2956809
Date : November 22 2020, 03:03 PM
should help you out ngRepeat have own scope, so we can't simple define flag in ngInit and set or clear it when first non zero item was found. But for solving we can use trick with $parent property of Scope
So see next code snippets:
code :
angular.module("app",[])
.controller("ctrl",function($scope){
    $scope.notification= {
        "text":0,
        "image":2,
        "video":1,
        "a":0
    };
});
.active{
    color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" ng-init="isFirst=true;">
    <div ng-repeat="(k,v) in notification" ng-class="{active:isFirstActive }" ng-init="isFirstActive=$parent.isFirst&&v!=0;$parent.isFirst=$parent.isFirst&&v==0">
       {{k}}:{{v}}
  </div>
</div>
angular.module("app",[])
.controller("ctrl",function($scope){
    $scope.notification= {
        "text":0,
        "image":2,
        "video":1,
        "a":0
    };
});
.active{
    color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" >
    <div ng-repeat="(k,v) in notification" ng-class="{active:isFirstActive }" ng-init="isFirstActive=!$parent.isAcivated&&v!=0;$parent.isAcivated=$parent.isAcivated||v!=0">
       {{k}}:{{v}}
  </div>
</div>


Share : facebook icon twitter icon
angularjs - ngRepeat with ngInit - ngRepeat doesn't refresh rendered value

angularjs - ngRepeat with ngInit - ngRepeat doesn't refresh rendered value


By : Shounak Shastri
Date : March 29 2020, 07:55 AM
I wish did fix the issue. You are running into an Angular performance feature.
Essentially Angular can see that the element in the array ('A' for example) is the same object reference, so it doesn't call ng-init again. This is efficient. Even if you concatenated an old list into a new list, Angular would see that it it the same reference.
code :
$scope.add = function(item) {
    var newItems = [];
    angular.forEach($scope.items, function(obj){
        this.push({val:obj.val});
    },newItems)

    newItems.push({val:item})
    $scope.items = newItems;
};
unique html on item index ngRepeat AngularJS

unique html on item index ngRepeat AngularJS


By : Hernan Saltiveri
Date : March 29 2020, 07:55 AM
will be helpful for those in need Use slice array on any like repeating subsections and index number on unique elements.
Following the examples above this would become:
code :
<!-- Unique -->
<div class="row">
  <div class="col col-lg-6">{{items[0].text}}</div>
  <div class="col col-lg-6">
    <div class="row">
      <div class="col col-lg-3" ng-repeat="item in items | slice:1:5">{{item.text}}</div>
    </div>
  </div>
</div>
<!-- Remainder -->
<div class="row">
  <div class="col col-lg-12" ng-repeat="item in items | slice:5">
    <ul>
      <li>{{item.text}}</li>
    </ul>
  </div>
</div>
<!-- Unique -->
<div class="row">
  <div class="col col-lg-8">{{items[0].text}}</div>
  <div class="col col-lg-4">
    <div class="row">
      <div class="col col-lg-12" ng-repeat="item in items | slice:1:2>{{item.text}}</div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col col-lg-4" ng-repeat="item in items | slice:3:5>{{item.text}}</div>
</div>
<!-- Remainder -->
<div class="row">
  <div class="col col-lg-12">
    <ul>
      <li ng-repeat="item in items | slice:6:8">{{item.text}}</li>
    </ul>
  </div>
</div>
filter('slice', function() {
  return function(arr, start, end) {
    return arr.slice(start, end);
  };
}).
AngularJS ngClass not working in ngRepeat in custom directive inside ngRepeat

AngularJS ngClass not working in ngRepeat in custom directive inside ngRepeat


By : Neo Lin
Date : March 29 2020, 07:55 AM
will help you The first thing that looked suspicious to me is that you were reassigning the $scope.dots property and your numActiveDots function, quite often was ending up with NaN. That property is passed into your directive as a string, then you are parsing/reassigning it as number. I tried renaming your parsed value to $scope.dotsinternal. That seems to make it work.
http://plnkr.co/edit/STwuts2D169iBLDoTtE2?p=preview
code :
$scope.dots = angular.isUndefined($scope.dots)?5:parseInt($scope.dots);
$scope.dotsinternal = angular.isUndefined($scope.dots)?5:parseInt($scope.dots);
angularjs bind template as item inside ngrepeat

angularjs bind template as item inside ngrepeat


By : Wayne Borgmeyer
Date : March 29 2020, 07:55 AM
With these it helps I have already done a sample like as your sample here. In this sample, I created more a custom directive named "dynamic" to resolve and compile the HTML string automatically in AngularJS.
HTML
code :
<table ng-app="myApp" ng-controller="templateController">
    <tbody>
        <tr ng-repeat="item in items">
            <td ng-bind="item.name"><td>                               
            <td dynamic="item.template"></td>
        </tr>
    <tbody>
</table>
var myApp = angular.module('myApp', []);
myApp.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});
myApp.controller('templateController', function ($scope){
    $scope.items = [{ name: "id" },
            { name: "name" },
            { name: "lastName"},
                    { id: 1, name: "name", template: "<a href='#/xx/{{item.id}}' >edit</a>"},
            { name: "name", template: "<button ng-click='del()' href='#'>del</button>" }];
});
AngularJS: remove item from a list using ngRepeat and ngInit

AngularJS: remove item from a list using ngRepeat and ngInit


By : Johnies Erni Adrias
Date : March 29 2020, 07:55 AM
With these it helps This behaviour is intended, ng-init purposely runs only once.
When you look at the ngInit directive, (https://github.com/angular/angular.js/blob/master/src/ng/directive/ngInit.js) you can see that the $evaluation of the script passed to ng-init is done in the compile function instead of the link function.
code :
var ngInitDirective = ngDirective({
  priority: 450,
  compile: function() {
    return {
      pre: function(scope, element, attrs) {
        scope.$eval(attrs.ngInit);
      }
    };
  }
});
Related Posts Related Posts :
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • store newline character with string in a variable
  • MP4 videos in Flowplayer does not play in Windows 7 Chrome
  • jquery focusin event not firing
  • How to debug Vue application with google chrome
  • html 5 web app cache download complete javascript alert?
  • Ember.js setupController fired only once
  • How to validate a currency input
  • How to convert my Array of data to key & value pair
  • Statistics circles in CSS
  • So I wanted to make a trig solver in javascript?
  • Showing HighCharts series name on x-axis and in legend
  • In Rails, how can we pass parameters in script?
  • Build Fails: `npm rebuild node-sass --force`
  • Angular Datepicker change dateformat
  • Trying to extract data from between two sets of characters
  • Configuring Jest in WebStorm
  • Uncaught Error: Syntax error, unrecognized expression: tr.ec_portfolio_title,
  • JQuery fading in fading out continuously
  • Unexpected end of input (Line 1) and Undefined Function?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org