This is my controller
$scope.subjects = ["Computer Security", "Graphics and Multimedia", "Networks", "Computer Science and Engineering", "Game Design", "Programming", "Information Technology", "Software Engineering", "Technology Management", "Telecommunications", "Web Development", "Sociology", "Psychology", "General", "Social Work", "Criminal Justice", "Law and Paralegal", "Public Safety", "Forensic Sciences", "Counseling", "Homeland Security", "Political Science", "Public Administration"];
This is my view where i am binding data
<label class="concentration-label3" ng-repeat="value in subjects">
<input ng-model="value.selected" ng-disabled="subjectCheckedCount == subjectLimit && !value.selected" type="checkbox" name="concentrations" class="concentration-label3__input js-concentration-value" value="{{value}}" data-mixpanel-subject="Design" >
<span class="concentration-label3__title" for="conc1">
{{value}}
<span class="concentration-label3__title__checkmark4"></span>
</span>
</label>
Its giving me the error that 'cannot bind property selected to string
xyz' Please help!!!
subjects is an array of strings, which don't have the property selected that you're trying to bind to your input.
for(var j = 0; j < $scope.subjects.length; j++){
$scope.subjectsArray.push({
'name': $scope.subjects[j],
'value': $scope.subjects[j]
});
}
We must provide ng-repeat an object in order to create any property of
that object later. We cannot create a property of a string. So I converted my array of string into array of objects.
Related
Suppose I have the following data:
var a = [{id: 1, name: {en: "English"}, desc: {en: "desc"}}];
Above array has more elements, suppose I have another component to create checkbox lists from an array, now I want to pass this array to that component with some other props like id key to use for id of my checkbox items, and label to use as the checkbox labels, The key I want to use as label for checkbox is name.en.
My data has the following format:
[{
"name": {
"en": "Limited Liability Company",
"dr": "",
"pa": ""
},
"description": {
"en": "This type of business combines the pass-through taxation benefits of a partnership with the limited-liability benefits of a corporation.",
"dr": "",
"pa": ""
},
"id": 1,
},
{
"name": {
"en": "Corporation",
"dr": "",
"pa": ""
},
"description": {
"en": "A corporation is a business in which a group of people acts together as a single entity; most commonly, owners of a corporation are shareholders who exchange consideration for the corporation's common stock. Incorporating a business releases owners of financial liability of business obligations; however, a corporation has unfavorable taxation rules for the owners of the business.",
"dr": "",
"pa": ""
},
"id": 2
}]
My checkbox component require 3 props id, label, data, following is my component html:
<div class="mb-3" v-for="(item, index) in listData" :key="index">
<div class="checkbox-wrapper d-flex">
<input type="checkbox" :id="item[id]" :value="item[id]" :checked="item.isChecked" #change="setValue($event, item)">
<label :for="item[id]" class="checkbox-label-over-flow"><span>{{item[label]}}</span></label>
</div>
</div>
Now how can I access label of each item with label variable ? if label = 'name.en'
I'm not sure how or when you are accessing the checkbox value, but the value is what you care about. Change the value to be your label.
<div class="mb-3" v-for="(item, index) in listData" :key="index">
<div class="checkbox-wrapper d-flex">
<input type="checkbox" :id="item.id" :value="item.label" :checked="item.isChecked" #change="setValue($event, item)">
<label :for="item[id]" class="checkbox-label-over-flow"><span>{{ item.label }}</span></label>
</div>
</div>
Also, #change, you are calling setValue() and passing item. You can access item.label from within the setValue() function as well
I have tried the filter logic from angular to one of the unordered list.
But, the search filter is working after typed 3 characters of the name, sometimes giving wrong search results.
<input type='text' ng-model='searchString' placeholder="Search a name..." />
<ul class="nav">
<li class="active" ng-repeat="item in artists.People | filter :searchString">
<a href ng-click='setSelectedArtist(item)'>{{item.name}}</a>
</li>
</ul>
JSON:
{
"People":[
{
"name":"Andrew Amernante",
"rating":3,
"img":"http://www.fillmurray.com/200/200",
"Description":"Glutenfree cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
"Likes":[
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
],
"Dislikes":[
"Birds",
"Red things",
"Danish food",
"Dead Batteries"
]
},
{
"name":"Frank Wang",
"rating":5,
"img":"http://www.fillmurray.com/200/201",
"Description":"Before errors, mails were only pressures. This is not to discredit the idea that a magic is the prose of anelizabeth. This could be, or perhaps some posit the outmost coil to be less than dedal. Some assert that those treatments are nothing more than carp.",
"Likes":[
"Frank",
"Manchester United",
"Football",
"Programming"
],
"Dislikes":[
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
]
},
{
"name":"Sissi Chen",
"rating":5,
"img":"http://www.fillmurray.com/200/202",
"Description":"Aaah! Natural light! Get it off me! Get it off me! Oh, loneliness and cheeseburgers are a dangerous mix. D'oh. Here's to alcohol, the cause of all life's problems.",
"Likes":[
"Cats",
"the beach",
"Chopin",
"Blue things"
],
"Dislikes":[
"Birds"
]
},
{
"name":"Diego Garcia",
"rating":2,
"img":"http://www.fillmurray.com/200/204",
"Description":"Facts are meaningless. You could use facts to prove anything that's even remotely true! I prefer a vehicle that doesn't hurt Mother Earth. It's a gocart, powered by my ownsense of selfsatisfaction. You don't win friends with salad.",
"Likes":[
"Talking Spanish",
"Spanish food",
"Spanish things",
"Football"
],
"Dislikes":[
"Not talking spanish",
"Chopin"
]
},
{
"name":"Fuad Rashid",
"rating":4,
"img":"http://www.fillmurray.com/200/206",
"Description":"Glutenfree cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
"Likes":[
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
],
"Dislikes":[
"Birds",
"Red things",
"Danish food",
"Dead Batteries"
]
}
]
}
Here is the plnkr code.
Ex: Start typing 'si', you will end up with two results where first one(frank wang) is not correct.
And, this is the reference plnkr where I'm referring for.
You would need to specify which object property, in this case name for the filter to filter against:
<input type='text' ng-model='searchString' placeholder="Search a name..." />
<ul class="nav">
<li class="active" ng-repeat="item in artists.People | filter: { name: searchString }">
<a href ng-click='setSelectedArtist(item)'>{{item.name}}</a>
</li>
</ul>
You would need to set the initial value of searchString to an empty string as well to match against all people when no text has been entered.
$scope.searchString = '';
Here is a Plunker demonstrating the functionality.
Hopefully that helps!
You can create your own customized filter to specify on which property you need to search:
$scope.searchTextByName = function(artist){
if($scope.searchText !== undefined){
if(artist.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) > -1 ){
return artist;
}
}
}
Otherwise, it will match on all JSON value of single people object with your searchText key.
How can you set a complex 'as label' in a comprehension expression in angular?
This may be very simple, and I'm just not getting it, or it could be impossible, but I've looked everywhere and I can find no hints towards a solution. The only work around I've found is to pre-populate the 'as label' attribute of the object with the exact string you want before using it in the comprehension expression (which I'd like to avoid).
For example, I have an object like this:
$scope.projects = [{
"description": "Asset Management",
"code": "ASSET",
"fieldName": "Asset Evaluation Level"
},
{
"description": "Checklist",
"code": "CHECK",
"fieldName": "Checklist Scores"
},
{
"description": "IT Support",
"code": "IT",
"fieldName": "IT Support Ticket Number"
}]
I have a select with ng-options:
<select ng-model="jiraProject" class="form-control" ng-options="option as option.description for option in projects"></select>
I want the options 'as' label to appear in the select dropdown like this:
"Asset Management (ASSET)", "Checklist (CHECK)", "IT Support (IT)"
Maybe through syntax like this?:
option as {options.description (option.code)} for option in projects
Thanks for any and all feedback in advance!
Do this :
<select ng-model="jiraProject" class="form-control" ng-options="option as option | formatOption for option in projects"></select>
and this :
yourModule.filter('formatOption', [function(){
return function( option ){
return option.description + ' (' + option.code + ')';
};
}]);
Angularjs filters are so awesome :-)
I am trying to follow this example on how to setup a combo-box using dojo, but wondering how one can specify name and value programmatically. The example presented uses the same values for label and value - which is probably not one wants in most cases.
{
"identifier": "abbreviation",
"label": "name",
"items": [
{ "abbreviation": "AL", "name": "Alabama" },
... other 48 states here ...
{ "abbreviation": "WY", "name": "Wyoming" }
]
}
If you are asking how to replace the hard coded list in the example then here is what you have to do. In the above scenario items was used to specify the data which is an array (abbreviations and names) of values.
In your case you will need to get the data / object from your data source. Once you have that data/object expose it to the view. Once this has been done you can now do the following structure.
You store is really your items above however stateStore will be a java script array which contains the data from your data source.
stateStore = [{"abbreviation": "AL", "name": "Alabama"},
... other 48 states here ...,
{ "abbreviation": "WY", "name": "Wyoming" }]
// create FilteringSelect widget, populating its options from the store
var select = new dijit.form.FilteringSelect({
name: "stateSelect",
placeHolder: "Select a State",
store: stateStore
}, "stateSelect");
HTML
<div style="width:50%;float: left;">
<h1>dijit.form.Select</h1>
<label for="stateSelect">State:</label>
<div id="stateSelect"></div>
</div>
Preselection is not working in the select field even though the objects are equal:
<select ng-show="isEditMode(todo.id)" id="assignee" name="assignee"
ng-model="todo.assignee" required
ng-options="user.name for user in users">
</select>
todo.assignee contains a user object, which should match one from users.
It seems that Angular does not recognize that the User object from todo.assignee is contained in users. Can I perform this mapping manually?
The select is shown with no value selected. I can choose a user (from users) and save the record without any problem.
Controller
$scope.todos = Todo.query();
$scope.users = User.query();
Update
As requested in the comments. Structure of the given objects:
$scope.todos
[
{
"id": 157,
"description": "my description 0",
"deadline": 1392073200000,
"assignee": {
"id": 34,
"name": "User 1",
"email": "user1#hotmail.com"
},
"comment": "my comment 0",
"done": true
}
...
]
$scope.users
[
{
"id": 34,
"name": "User 1",
"email": "user1#hotmail.com"
},
{
"id": 35,
"name": "User 2",
"email": "xxc#gmail.com"
},
{
"id": 36,
"name": "User 3",
"email": "xx#hotmail.com"
}
]
The scope of the select comes from a repeat:
<tr ng-repeat="todo in todos | filter:query | filter:{assignee:queryAssignee} | filter:queryDone" ng-class="{danger: isDue(todo)}">
<td>
According to your description:
todo.assignee contains a user object
But your options' value are user.name strings, one object and one string will never be matched.
So, replace
ng-model="todo.assignee"
to
ng-model="todo.assignee.name"
UPDATE:
use ng-options="user.name as user.name for user in users"
Full Answer:
<select ng-show="isEditMode(todo.id)"
ng-model="todo.assignee.name" required
ng-options="user.name as user.name for user in users">
</select>
Plnkr:
http://plnkr.co/edit/A1XdMYmACNCr3OwBuFhk?p=preview
select as label for value in array
label: The result of this expression will be the label for element. The expression will most likely refer to the value variable (e.g. value.propertyName).
you can have refer here:
http://docs.angularjs.org/api/ng.directive:select
UPDATE2:
To fix the side effect, you can use option with separated value and display name
<select ng-model="todo.assignee" required>
<option ng-repeat="user in users" value="{{user}}" ng-selected="todo.assignee.name === user.name">
{{user.name}}
</option>
</select>
Plnkr:
http://plnkr.co/edit/6tzP9ZexnYUUfwAgti9b?p=preview
Explanation:
Before:
When you select one of option, it assign option value to model todo.assignee.name, so only change the name.
todo.assignee.name = "User 3" // like this
todo.assignee // didn't change the id & email
/* {"id": 34,
"name": "User 1",
"email": "user1#hotmail.com"} */
But, Now:
When you select one of option, it assign object value to model todo.assignee, so let what you want.
todo.assignee.name = {
"id": 36,
"name": "User 3",
"email": "user3#hotmail.com"
} // like this
todo.assignee // now change the whole value
/* {"id": 36,
"name": "User 3",
"email": "user3#hotmail.com"} */
Maybe it can be useful for someone else:
<select ng-show="isEditMode(todo.id)" id="assignee" name="assignee"
ng-model="todo.assignee" required
ng-options="user as user.name for user in users track by user.id">
</select>
The magic trick is in "track by user.id"
https://docs.angularjs.org/api/ng/directive/ngOptions