Search Posts

Category: angular-bootstrap

How to fill ui-select choices items when user typing?

I am using ui-select to show items in select tag and search in items: <ui-select name=”courseId” ng-model=”vm.course.id”> <ui-select-match> <span ng-bind=”$select.selected.title”></span> </ui-select-match> <ui-select-choices repeat=”item.id as item in (vm.courses | filter: $select.search) track by item.id”> <span ng-bind=”item.title”></span> </ui-select-choices> </ui-select> How can I fill items when user is typing and make remote call instead of repeat directive? For example maybe something like this: <ui-select name=”courseId” ng-model=”vm.course.id”> <ui-select-match> <span ng-bind=”$select.selected.title”></span> </ui-select-match> <ui-select-choices refresh=”vm.searchCourses($select)”> <span ng-bind=”item.title”></span> </ui-select-choices> </ui-select> angular.module(‘rgh’).controller(‘CourseController’, CourseController); […]

How to select the options of typeahead using the keyboard keys?

I have an AngularJs 1 application, it uses ng-grid, ng-bootstrap and ng-typeahead. angular-ui-bootstrap1.3.3, angular-ui-grid 4.0.10 Ng-grid has a multiple cells and multiples rows, you can navigate through it using the keyboard. when you get to typeahead cell, you can type anything, options will be visible. However if you press the down key to select an option you’ll go to the next row instead of being able to pick an option from the list. If you […]

Angular Cannot find name ‘Angular’ Visual Studio 2015 Dotnet MVC web app

So I am new in angular and i am working on visual studio 2015 update 3. Simple Angular app work perfectly on VS2015 dotnet MVC project. I have a problem when i downgradecomponent in app.module.ts file angular.module(‘app’).directive(‘viewTest’, downgradeComponent({ component: ViewTestComponent })); error is on angular it says cannot find name ‘angular’ my package.json file { “name”: “angular-quickstart”, “version”: “1.0.0”, “description”: “QuickStart package.json from the documentation, supplemented with testing support”, “scripts”: { “build”: “tsc -p src/”, […]

AngularJS Formly – dynamic change of field type

What I wish to achieve is a single page (a form) used for both edit and display a record’s data. I would like to have an edit button which would switch modes from edit to display and vice versa. In terms of layout both modes looks the same. In edit mode I have inputs/selects/typeaheads/multiple selects/datetime pickers etc. But in display mode values are displayed like in simple span. Something like that 🙂 So my question […]

How do I display Angular UI Bootstrap date picker on click?

I have an Angular app that uses Full Calendar. I have a Full Calendar custom button that when a user clicks, should open a Angular Bootstrap Datepicker. I’m currently toggling CSS visibility but for some reason, the date picker doesn’t display (after clicking the button) unless I resize the window. My template: <div id=”cal-go-to-date” ng-style=”goToDate.style”> <div uib-datepicker ng-model=”goToDate.dt” class=”well well-sm” datepicker-options=”goToDate.options”></div> </div> My Angular controller: $scope.goToDate = { dt: new Date(), options: { datepickerMode: ‘month’, […]

close bootstrap accordion timing

I am trying to close bootstrap accordion on click using angularJS, I want my close in 5 second how to do it, Here is my code: <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script> </head> <body> <div class=”container”> <h2>Collapsible Panel</h2> <p>Click on the collapsible panel to open and close it.</p> <div class=”panel-group”> <div class=”panel panel-default”> <div class=”panel-heading”> <h4 class=”panel-title”> <a data-toggle=”collapse” href=”#collapse1″>Collapsible panel</a> </h4> </div> <div id=”collapse1″ class=”panel-collapse […]

Show/Hide all with show/hide sections inside angularjs

I need to have an overall Show/Hide click to show or hide all the detail divs of a list of “panels” of data. Also within each panel, there is a Show/Hide click to individually show or hide that div of data. I think that if the overall show/hide is clicked that the individual click values should be set equal to overall value when clicked. That way if the individual ones are changed, they are all […]

Angular bootstrap modal inside a modal

How can I open a modal inside of a modal? Ive followed this plnkr but I got an error when I click the confirm button of the second modal. This is the error: Error: [$injector:unpr] This is my first modal $scope.edit = function(data) { var modalInstance = $uibModal.open({ templateUrl: “/wp-content/themes/copywriter-theme/angular-modal-template/management_modal.html”, controller: ‘managementModal’, resolve: { items: function() { return data; } } }); } This is my 2nd modal angular.module([‘ui.bootstrap’]).controller(‘managementModal’,[‘$scope’,’$http’,’$uibModalInstance’,’$uibModal’,’items’,function($scope, $http, $uibModalInstance, $uibModal, items){ $scope.names = […]