I have designed elements using angular material design . i have used md-chips for rendering skills data as bellow
<md-chips ng-model="user.skills"
readonly="readonly"
placeholder="Enter another skill"
delete-button-label="Remove Skill"
delete-hint="Press delete to remove skill"
secondary-placeholder="Enter a Skill">
<md-chip-template>{{$chip.skill_title}}</md-chip-template>
</md-chips>
In that i have used the user_skills variable to load existing skills.it's loading as i have expected. i need to give the option to add new chips from this . but here when i write skill and enter it'l become empty chip like bellow image.
how to solve it??advanced thanks..
You need to write a function to set 'skill_title'
VIEW
<div ng-controller="BasicDemoCtrl as ctrl" layout="column" ng-cloak="" ng-app="MyApp">
<md-content class="md-padding" layout="column">
<md-chips ng-model="ctrl.skills" readonly="ctrl.readonly" md-transform-chip="ctrl.newSkill($chip)">
<md-chip-template>
<span>
<strong>{{$chip.skill_title}}</strong>
</span>
</md-chip-template>
</md-chips>
</md-content>
</div>
Controller
(function () {
'use strict';
angular
.module('MyApp')
.controller('BasicDemoCtrl', DemoCtrl);
function DemoCtrl ($timeout, $q) {
var self = this;
self.skills = [
{
'skill_title' : 'Angular'
},
{
'skill_title' : 'Material'
},
{
'skill_title' : 'C#'
}
];
self.newSkill = function(chip) {
return {
skill_title: chip
};
};
}
})();
Take a look at this working example.
http://codepen.io/mattspaulding/pen/xZGQyE
Related
I have implemented auto-complete feature, now I am trying to integrate into my main application. This is the controller function which I designed.
(function() {
'use strict';
angular
.module('MyApp')
.controller('DemoCtrl', DemoCtrl);
function DemoCtrl($http) {
this.querySearch = function (query) {
return $http.get('http://127.0.0.1:8888/autocomplete/' + escape(query)).then(function(result) {
return result.data;
});
}
}
})();
This is my HTML for the first scenario:
<div class="autocompletedemoFloatingLabel" ng-controller="DemoCtrl as ctrl" ng-app="MyApp" layout="column" ng-cloak="">
<md-content class="md-padding">
<form name="searchForm" ng-submit="$event.preventDefault()">
<div layout-gt-sm="row">
<md-input-container flex="">
</md-input-container>
<md-autocomplete md-floating-label=""
flex=""
md-item-text="item.Symbol"
md-items="item in ctrl.querySearch(ctrl.searchText)"
md-search-text="ctrl.searchText"
md-selected-item="ctrl.selectedItem"
md-no-cache="ctrl.noCache"
md-input-name="autocompleteField"
required="">
<input>
<md-item-template>
<span md-highlight-text="ctrl.searchText">{{item.Symbol+" - "+item.Name+" ("+item.Exchange+")"}}</span>
</md-item-template>
<div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
<div ng-message="required">You <b>must</b> have a favorite movie.</div>
<div ng-message="minlength">Your entry is not long enough.</div>
<div ng-message="maxlength">Your entry is too long.</div>
</div>
</md-autocomplete>
</input>
</div>
</form>
</md-content>
</div>
Now the application currently contains controller in this format:
var app = angular.module("assign8", ["ngAnimate"]);
app.controller("MyCtrl", function ($scope) {
$scope.myValue=false;
$scope.myValue_sec = false;
});
I am very new to angular, I am unable to map the first format to the second one. Kindly let me know how can I map first to second. TIA.
I'm not sure where the confusion lies. The two scenarios are very similar.
app.controller("MyCtrl", function ($scope) {
this.querySearch = function (query) { ... }
});
There are two manners to make the binding in AngularJS.
The controller as that is what is done in the first format, you can see DemoCtrl as ctrl in html the ctrl variable represent your controller, in your controller, you see this, every attribut of this can be accessed via ctrl in html. for example: ctrl.myAttribut.
The second manner is the use of $scope service. that is what is done in the second format. every attribut of $scope can be accessed in html as long as the corresponding controller is called. For example: if in your controller you have $scope.myAttribut, in your html you can access like this {{myAttribut}}.
This worked:
<script>
var app = angular.module("MyApp");
app.controller("DemoCtrl", function ($http) {
this.querySearch = function (query)
{
return $http.get('http://127.0.0.1:8888/autocomplete/' + escape(query)).then(function(result) {
return result.data;
});
}
});
</script>
I have some data in the ng repeat, and inside that I have some data under each divs which is collapsed.
No when I click on the main div, I want only one div to collapse in at a time.
Eg: if I click abc, asdasd should be displayed.. Then if I click abc1, asdasd1 should be displayed but NOT asdasd
<script>
angular.module('myApp', [])
.controller("Ctrl_List", ["$scope", function(s) {
s.people = [
{name:"Sten", age:"49"}
,{name:"John", age:"39"}
,{name:"Hanne", age:"37"}
,{name:"Jens", age:"37"}
,{name:"Brian", age:"24"}
,{name:"Johnny", age:"24"}
,{name:"Peter", age:"49"}
]
s.obj = [
{
"name":'abc',
"text":'asdasd'
},
{
"name":'abc1',
"text":'asdasd1'
}
]
}])
html:
<body ng-app="myApp" ng-controller="Ctrl_List">
<div ng-repeat="ob in obj">
<button class="btn" data-toggle="collapse" href="#abc-{{ob.name}}"> {{ob.name}}</button>
<div id="abc-{{ob.name}}" class="collapse">{{ob.text}}</div>
</div>
</body>
data-parent is not working for me, or may be I am not using it properly.
Please Check the Fiddle here
Using a pure Angular approach rather than using JQuery for this.
Add a new property show to the each object and use ng-if to show/hide its corresponding text using a method in controller.
<div ng-repeat="ob in obj">
<button class="btn" ng-click=" showThis(ob)"> {{ob.name}}</button>
<div ng-if="ob.show">{{ob.text}}</div>
</div>
controller method
s.showThis = function(obj) {
//Hides all
angular.forEach(s.obj, function(ob) {
if(ob.name != obj.name) {
ob.show = false;
}
});
//Toggles current object show/hide
obj.show = !obj.show;
}
Working Fiddle
I'm trying to use md-chips to collect input from user with auto-complete. For ex: price,available,Y,N. where each component will be rendered in chips.There will be multiple inputs from user per line. When i submit the form i need all the chips per line entered by user. This is where i'm facing the problem.
<div ng-repeat ="rule in rules">
<md-chips ng-model="selectedHeaders">
<md-chip-template>
{{$chip}}
</md-chip-template>
</md-chips>
</div>
the above code works as my model is just selectheader and in js it's
$scope.selectedHeaders = [];
how should i use it to for rule.selectheader??. If i change my model to rule.selectheader , it throws this below error
Cannot set property 'selectedHeaders' of undefined.
Any pointers to solve this issue will be much apppreciated. If issue is not clear, please ask
Have you defined rules values?
In js, at least the value of rules must be something like this
var rules = [{
selectedHeaders: ['Apple', 'Orange']
}, {
selectedHeaders: ['Banana']
}];
you can do like below
Js code
var app = angular.module('myApp', []);
app.controller('ctrl1', function($scope) {
$scope.rules = [{
name: 'rule1',
id: 1
}, {
name: 'rule2',
id: 2
}];
$scope.data = {};
});
HTML
<div ng-app='myApp'>
<div ng-controller='ctrl1'>
<div ng-repeat="rule in rules">
<md-chips ng-model="data.selectedHeaders">
<md-chip-template>
{{$chip}}
<!-- for testing-->{{rule}}
</md-chip-template>
</md-chips>
</div>
</div>
</div>
Here is the link Jsfiddle demo
The Angular-Material based input/text field intend not to come out of the search on pressing ESC button; Is there any tweak for this?
Expected view on pressing Escape button
Current Elements panel
Here's an example of removing focus from an input with the escape key (I think that's what you are trying to achieve) - CodePen
Markup
<div ng-controller="DemoCtrl" ng-app="MyApp" ng-cloak>
<md-input-container md-theme="docs-dark" flex="">
<label>Name</label>
<input id="myInput" type="text" ng-keydown="inputKeydown($event)">
</md-input-container>
</div>
JS
(function () {
'use strict';
angular
.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('DemoCtrl', DemoCtrl);
function DemoCtrl ($scope, $element) {
var myInput = angular.element($element[0].querySelector('#myInput'));
$scope.inputKeydown = function (event) {
if (event.key === "Escape") {
myInput.blur();
}
}
}
})();
I tried to add ng-click on a button generated before (dynamic), but didn't work well. Also I tried already all solutions found on this forum and no one work well.
My html code:
<body class="max_height" ng-app="myApp">
<div class="container max_height" ng-controller="myCtrl">
<div id="play" tabindex="0" ng-init="init()" ng-keydown="keyDown($event)">
{{ content }}
</div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/script.js"></script>
</body>
My AngularJS code:
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $compile) {
$scope.init = function() {
var el = '<button class="btn" id="start" data-ng-click="startAnimation()">Start</buttom>';
var element = angular.element(document.querySelector('#play'));
var generated = element.html(el);
$compile(generated)($scope);
}
$scope.startAnimation = function(){
console.log("click");
}
});
My error is "RangeError: Maximum call stack size exceeded" and this is generated by $compile(generated)($scope); . Another problem, derived from the first, is that if I make one click on button then the function startAnimation will me executed hundreds of times.
Please give me a solution. Where is the mistake.
Issue is with this line of code:
$compile(generated)($scope);
Instead it should be:
$compile(generated.contents())($scope);
You can assign the function to a scope variable and depending on your business logic assign appropriate functions to your ng-click. In the below example $scope.addGeoFence() is added to the ng-click of "Add GeoFence" list-item
$scope.layout = [
{name: 'Home', icon: 'home'},
{name: 'Add Geofence',
icon: 'add_location',
click: $scope.addGeoFence}
];
$scope.addGeoFence = function() {
console.log("calling addGeoFence()");
}
<md-list>
<md-list-item ng-repeat="snav in layout">
<md-button class="md-raised" ng-click="(snav.click)()" flex>
<md-icon md-font-library="material-icons">{{snav.icon}}
</md-icon>
<span>{{snav.name}}</span>
</md-button>
</md-list-item>
</md-list>