Develop Reference

Cannot bind ngModel to p-dropdown value (Angular)

I using PrimeNg dropdown
Here is html of template
<div>
<label>{{ l('Portfolio') }}</label>
<p-dropdown
[(ngModel)]="property.portfolioId"
[disabled]="!landlordPortfolios.length"
[options]="landlordPortfolios"
autoWidth="false"
[style]="{ width: '100%' }"
name="landlordPortfolio"
[autoWidth]="true"
></p-dropdown>
</div>
I get values for dropdown via this method
getLandlordPortfoliosById(landlordId: number): void {
this.landlordPortfolios = [];
this._landlordPortfolios.getPortfolioDropdownValuesById(landlordId).subscribe(result => {
result.items.forEach(value => {
this.landlordPortfolios.push({
label: value.name,
value: value.id,
});
});
});
}
And call it like this
if (this.property.landlordId) {
this.getLandlordPortfoliosById(this.property.landlordId);
this.initLandlordSuggestionsById(this.property.landlordId);
}
For example I have landlordId = 1 and selected option for dropdown must be also with id = 1.
Here is result
But I get selected item in dropdown, just blank field, and I see all options when click dropdown. Where can be my problem?

So problem was in data request/get
if I set *ngIf to dropdown, like this *ngIf = "landlordPortfolios.length" and delete [disabled], all going well.

Using angularjs-dropdown-multiselect for dropdownwith checkbox, how to disable particular options using their id's

Here is the code where I have used the plugin to display options with checkbox in angular.I need to disable particular/set of options based on a condition. the ng-disable does not seem to help. Jquery needs to identify each li or option using id's.
<div ng-if="tab===1"
class="col-md-3 padd0LeftRight marTop5 width150"
ng-dropdown-multiselect=""
options="severities"
selected-model="$parent.severityModel" checkboxes="true"
extra-settings="severitySettings"
translation-texts="SeverityText"></div>
Controller:
$scope.severityModel =[];
$scope.severitySettings = {
showCheckAll: false,
showUncheckAll:false,
externalIdProp: ''
};
$scope.SeverityText = {
buttonDefaultText:"Severity "
};
{label: $scope.resource['casepage.filter.ciscopending.internal'],
name:'Cisco_Pending'
}];
$scope.severities = [
{label:$scope.resource['landingpage.label.severity1'], name:'1',id:'1'},
{label:$scope.resource['landingpage.label.severity2'], name: '2',id:'2'},
{label:$scope.resource['landingpage.label.severity3'], name: '3',id:'3'},
{label:$scope.resource['landingpage.label.severity4'], name: '4',id:'4'}
];
Onclick of a button or a checkbox, I have to disable some options in the dropdown. How do we do that? Can anyone suggest here. Thanks.

All the checkboxes inside a ng-repeat are getting checked when I select just one

I have list of objects named rolePermissionList like this:
[{"id":1,"name":"createUser","type":"user","marked":1},{"id":2,"name":"deleteUser","type":"user","marked":1},{"id":3,"name":"editRole","type":"role","marked":0}]
and I use ng-repeat to repeat checkboxes using the values in that list like this
<div class="form-group">
<label>Role Permissions:</label>
<div class="checkbox" ng-repeat="permission in rolePermissionList">
<label>
<input type="checkbox" ng-model="idsPermission[permission .idPermission ]"
ng-checked="permission.checked">{{permission.name}}
</label>
</div>
</div>
the ng-model of the checkboxes is named idsPermission and it's a list of numbers, those numbers are the IDS of the objects.
When I load the page the checkboxes that are supposed to be checked are checked this part works fine, but when I check another checkbox all the checkboxes gets checked, and when I uncheck a checkbox the same thing happens all the checkboxes gets unchecked.
I use that list of numbers named idsPermission to get all the IDS of the checkboxes that are checked, this worked before I used the directive ng-checked="permission.checked", but now I need to use it since now I need to show the checkboxes that are already marked.
this is my controller
angular.module('MyApp')
.controller('RolCtrl', ['$scope', 'RolService',
function ($scope, RolService) {
$scope.idsPermission = {};
$scope.getListCheckBoxesEditRole = function (idRole) {
$scope.selectRol.descripcion;
RolService.getListCheckBoxesEditRole(idRole)
.then(
function (d) {
var userPermissionList = [];
for (var permission in d) {
if (d[permission ].type === 'user') {
if (d[permission ].marked === 1)
{
d[permission ].checked = true;
userPermissionList.push(d[permission ]);
} else {
userPermissionList.push(d[permission ]);
}
}
}
$scope.rolePermissionList = userPermissionList;
},
function (errResponse) {
console.error('ERROR');
}
);
};
}
$scope.getListCheckBoxesEditRole(3);
]);
The RolService.getListCheckBoxesEditRole(idRole) service returns this JSON [{"id":1,"name":"createUser","type":"user","marked":1},{"id":2,"name":"deleteUser","type":"user","marked":1},{"id":3,"name":"editRole","type":"role","marked":0}]
and what I do in the controller is iterate over that list and check if the marked field is 1 if it's 1 I do this d[permission ].checked = true; I what I think that I do in that line is setting the checked value to true so I could use this directive in the html view ng-checked="permission.checked"
I tried doing this ng-checked="idsPermission[permission.checked]" but when I do this the values that are marked=1 in the JSON that I paste above don't appear checked when I load the page, but if I put it like this ng-checked="permission.checked" they appear marked as they should, but when I click a checkbox all the checkboxes gets selected.

I came across too many issues to document but the main problem was how you are iterating through the array that is returned from the service. It should be something like this:
Controller
angular.forEach(d.data, function(permission) {
if (permission.type === 'user') {
if (permission.marked === 1) {
permission.checked = true;
userPermissionList.push(permission);
} else {
userPermissionList.push(permission);
}
}
});
Then you can simplify your html like this:
HTML
<input type="checkbox" ng-model="permission.checked" />
You can see all of the changes in this working plunk.

I can't see in your code that $scope.idsPermission is getting defined. In ng-repeat you only set the key for the object but the value is undefined. That's why the checkbox won't show the correct value.
You could use ng-init to initialize the model. Please have a look at the simplified demo below or this fiddle.
(Also defining the models in your controller would be possible.)
Only using ng-model should be enough for the checkbox to work. I think I've read somewhere that ng-checked and ng-model aren't working smoothly together.
angular.module('demoApp', [])
.controller('mainCtrl', MainCtrl);
function MainCtrl() {
var vm = this;
angular.extend(vm, {
data: [{
id: 0,
marked: 1
}, {
id: 1,
marked: 0
}, {
id: 2,
marked: 1
}]
})
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainCtrl as ctrl">
<div ng-repeat="item in ctrl.data">
<input type="checkbox" ng-init="ctrl.idPermissions[item.id] = !!item.marked" ng-model="ctrl.idPermissions[item.id]"/>{{item.id}}
</div>
<pre>
permissions: {{ctrl.idPermissions | json: 2}}
data{{ctrl.data | json: 2}}</pre>
</div>

Select2 val returning all available tags instead of selected tags

I have been using Select2 multi-select for selecting and add tags to a tag cloud. It was previously working fine, but now the line to return selected tags is returning all available tags.
I need to emphasize that this is for multi-select not single select.
This is the code I use to make use of the Select2 multi-select:
$('#Tags').select2({
val: toSelect,
createSearchChoice: function(term, data) {
if ($(data).filter(function() {
return this.text.localeCompare(term) === 0;
}).length === 0) {
return {
id: term,
text: term,
count: 1
};
}
},
multiple: true,
data: data,
tokenSeparators: [","],
allowClear: true,
placeholder: "Enter tag"
});
where toSelect is an array of already assigned tags to a particular item.
This is the line that is not working:
var tagsdata = $("#Tags").select2("val");
The element Tags look like this:
<div type="hidden" id="Tags" style="width:300px" />
Does anyone have an idea why it is doing so?

knockout checked binding - only one checked

I have a list of Admins with a check box. I want to be able to select only one Admin.
HTML:
<tbody data-bind="foreach: people">
<tr>
<td>
<input type="checkbox" data-bind="attr: { value: id }, checked: $root.selectedAdmin">
<span data-bind="text: name"/>
</td>
</tr>
</tbody
JS:
function Admin(id, name) {
this.id = id;
this.name = name;
}
var listOfAdmin = [
new Admin(10, 'Wendy'),
new Admin(20, 'Rishi'),
new Admin(30, 'Christian')];
var viewModel = {
people: ko.observableArray(listOfAdmin),
selectedAdmin: ko.observableArray()
};
ko.applyBindings(viewModel);
For Example if Admin id 10 is selected the other admins should be deselected.
Is that Possible to do with Knockout?

You should really use radio buttons if you only want to allow multiple selection.
However if you still want to use checkboxes then on solution would be to combine the checked and the click binding:
Use the checked to check only when the current id equal to the selectedAdmin property and use the click binding to set the selectedAdmin.
So you HTML should look like this:
<input type="checkbox" data-bind="attr: { value: id },
checked: $root.selectedAdmin() == id,
click: $parent.select.bind($parent)" />
And in your view model you just need to implement the select function:
var viewModel = {
people: ko.observableArray(listOfAdmin),
selectedAdmin: ko.observableArray(),
select: function(data) {
this.selectedAdmin(data.id);
return true;
}
};
Demo JSFiddle.
Notes:
the return true; at the end of the select function. This is required to trigger the browser default behavior in this case to check the checkbox.
the .bind($parent) is needed to set the this in the select function to be the "parent" viewModel object.