angularjs-ng-repeat | 易学教程

form validation angularjs without submit button

阅读更多关于 form validation angularjs without submit button

问题 I want validation of the form which do not have the submit button. <div ng-controller="UserCreationCtrl"> <form novalidate="novalidate" class="form-horizontal"> <div class="control-group"> <label class="control-label" for="inputUserLogin">User Login:</label> <div class="controls"> <input type="email" id="inputUserLogin" ng-model="user.userLogin" placeholder="User Login" required /> </div> </div> <div class="control-group"> <label class="control-label" for="inputFirstName">First name:</label>

How to retain the scroll position of ng-repeat in AngularJS when removing an item from the top

阅读更多关于 How to retain the scroll position of ng-repeat in AngularJS when removing an item from the top

问题 I tried to work from the solution to this How to retain scroll position of ng-repeat in AngularJS? to achieve retaining the scroll position when removing the top item in an ng-repeat but couldn't figure out the code to do so. Also, side note, the list should print in the same order as the items array, not in the reverse as the example does. The solution's code: angular.module("Demo", []) .controller("DemoCtrl", function($scope) { $scope.items = []; for (var i = 0; i < 10; i++) { $scope.items

angular bootstrap tabs - select function called in page load

阅读更多关于 angular bootstrap tabs - select function called in page load

问题 I have the angular bootstrap tabs in the following format. (see the plunker) The select function is supposed to trigger when the tabs are selected. But strangely, when the page is loaded, the very first tab's select function gets triggered. (prints tab selected Dynamic Title 1 onload..) "http://plnkr.co/edit/vyOOhCdIl7s1Wvou7Dr9?p=preview" angular.module('ui.bootstrap.demo', ['ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope) { $scope.tabs = [ {

AngularJS - How to access to the next item from a ng-repeat in the controller

阅读更多关于 AngularJS - How to access to the next item from a ng-repeat in the controller

问题 I'd like to access to the parameters of the next item on screen when clicking on a button. I use a ng-repeat in my html file: <li ng-repeat="item in items | filter:query" ng-show="isSelected($index)"> <a href="" ng-click="itemNext()"><img src="xxx.jpg" /></a> </li> And the index in my Controller with a loop: $scope.itemNext = function () { $scope._Index = ($scope._Index < $scope.nbItems - 1) ? ++$scope._Index : 0; $scope.functionToCallWithNextItem(nextItem.param1); }; A simple $scope.items[

Fixed header table in AngularJS

阅读更多关于 Fixed header table in AngularJS

问题 I'm stuck on a problem involving a fixed header table. I'm using AngularJS & Bootstrap to build a web application. I can't use ng-grid as it doesn't support IE7. So, I'm populating the table rows by ng-repeat . The application is responsive . So, I can't give fixed width to the cells/headers. Is there any simple way to have the table headers fixed? I've put up a Plunker at Fixed header table with AngularJS Thanks in advance. 回答1: I created a directive for this recently, you can install it

How to remove item from array with filter in AngularJS?

阅读更多关于 How to remove item from array with filter in AngularJS?

问题 When I click on tr without any filter, my function array.splice() works. Indexes in the array are in the correct order, so the array.splice() works. When the filter is enable, Indexes in the array are not updated and still in the same order. So array.splice() removes the wrong item. <span ng-click="orderP0 = 'statut_name'; reversePO=!reversePO">order</span> <tr ng-repeat="project in projects | orderBy : orderPO : reverse track by $index" ng-click="remove($event,$index,projects)"> <span class=

In AngularJS, what is the correct way to filter an array based on odd or even $index property?

阅读更多关于 In AngularJS, what is the correct way to filter an array based on odd or even $index property?

I want to filter an array based on even and odd $index property and I want to add odd elements in a separate div and even elements in another div, I could easily do this in JavaScript or jQuery, but I wanted to know the correct way to implement the same in AngularJS. This is what I've done so far: <div ng-app> <div ng-init="names=['John', 'Mary', 'Cate', 'Suz']"> <div class="row" ng-repeat="name in names"> <div class="col-xs-6" ng-show="(($index + 1)%2) == 0">{{name}}</div> <div class="col-xs-6" >{{name}}</div> </div> </div> </div> It shows empty spaces in place of odd elements in first case,

How to get normalized values for an array when using ng-repeat

阅读更多关于 How to get normalized values for an array when using ng-repeat

I am trying to get normalized value of one array associated to different groups. http://jsfiddle.net/k5Dvj/5/ I don't want to add something new into the original array items, so I am returning new objects for normalized items for each group. $scope.nomalizedItems = function (groupid) { var groupItems = $scope.originalItems.filter(function (item) { return item.groupid == groupid }); var values = groupItems.map(function (item) { return item.value; }); var maxValue = Math.max.apply(null, values); return groupItems.map(function (item) { return { id: item.id, normalizedValue: item.value / maxValue

Show a loading screen as background images load in ng-repeat

阅读更多关于 Show a loading screen as background images load in ng-repeat

I have a list loaded through ng-repeat where each element contains an img tag. I'd like to show some sort of loading indicator (occluding the list items) until every image within every item has finished loading. I guess I would need to hook into some event broadcast by the angular back-img directive but I don't really know where to start here. Okay, so I solved my problem. First of all, @Vladimir, you're totally right -- back-img was a directive my colleague wrote, which obscured the solution to me for a while. What I've done is write a really simple directive that calls a $scope -bound

Select multiple objects and save to ng-model

阅读更多关于 Select multiple objects and save to ng-model

HTML: <select ng-model="contact.groups" ng-options="item.id as item.name for item in groups" ng-multiple="true" multiple> <option value="">Choose groups</option> </select> contact.groups contains a list of groups assigned to the contact: [ { id: 145, name: 'FooBar } ] groups is a list of all available groups. First problem is that item.id in ng-options displays not the correct ID of the group but seems to count from 0 (first group in list), 1 (second group in list), etc Second problem is that contact.groups is not taken into account, there is no pre-selected groups in the select field. See