I am trying to use knockoutjs 1.2.l and with following code
$(function() {
var viewModel = {
categories: ko.observableArray([
{"Selected": false, "Text": "Rooms", "Value": "1"},
{"Selected": false, "Text": "Automobile", "Value": "2"},
{"Selected": false, "Text": "Buy & Sell", "Value": "3"},
{"Selected": false, "Text": "Tutions", "Value": "4"},
{"Selected": false, "Text": "Immigration", "Value": "5"}
]),
initialData: {
"Description": null,
"SubCategoryId": 0,
"Title": null,
"UserId": 0,
"AdTypeId": 0,
"AddressId": null,
"SubCategory": null,
"User": null,
"AdType": null,
"Address": null,
"Id": 0,
"CreatedOn": "\/Date(1307627158991)\/",
"CreatedBy": 0,
"LastUpdatedOn": "\/Date(1307627158991)\/",
"LastUpdatedBy": 0
},
chosenCategory: ko.observable()
};
ko.applyBindings(viewModel); // Makes Knockout get to work
});
Follwing is the html
<div id="createAdDiv">
<form action="/Ads/Create" method="post"> <p>
You've chosen: <b data-bind="text: chosenCategory().Text"></b>(Value: <span data-bind='text: chosenCategory().Value'></span>)
</p>
<div data-bind="visible: chosenCategory"> <!-- Appears when you select something -->
You have chosen a country with population
<span data-bind="text: chosenCategory() ? chosenCategory().Text : 'unknown'"></span>.
</div>
<fieldset>
<div class="editor-label">
<label for="SubCategoryId">Choose a Sub Category</label>
</div>
<div class="editor-field">
<select data-bind="options: categories,optionsCaption:'Choose...',optionsText: 'Text',value:chosenCategory" data-val="true" data-val-number="The field Choose a Sub Category must be a number." data-val-required="The Choose a Sub Category field is required." id="SubCategoryId" name="SubCategoryId"></select>
<span class="field-validation-valid" data-valmsg-for="SubCategoryId" data-valmsg-replace="true"></span>
</div>
</fieldset>
</form></div>
Throws the exception.
Unable to parse binding attribute. Message: TypeError: chosenCategory() is undefined;
Attribute value: text: chosenCategory().Text
But, if I change javascript to following it works
$(function() {
var viewModel = {
categories: ko.observableArray( [{"Selected":false,"Text":"Rooms","Value":"1"},{"Selected":false,"Text":"Automobile","Value":"2"},{"Selected":false,"Text":"Buy & Sell","Value":"3"},{"Selected":false,"Text":"Tutions","Value":"4"},{"Selected":false,"Text":"Immigration","Value":"5"}] )
,initialData: {"Description":null,"SubCategoryId":0,"Title":null,"UserId":0,"AdTypeId":0,"AddressId":null,"SubCategory":null,"User":null,"AdType":null,"Address":null,"Id":0,"CreatedOn":"\/Date(1307628565958)\/","CreatedBy":0,"LastUpdatedOn":"\/Date(1307628565958)\/","LastUpdatedBy":0}
};
viewModel.chosenCategory = ko.observable(viewModel.categories);
ko.applyBindings(viewModel); // Makes Knockout get to work
});
I am following an example from knockout.js website only.
You are going to want to check for null in your first paragraph tag like:
<p>
You've chosen: <b data-bind="text: chosenCategory() ? chosenCategory().Text : 'unknown'"></b>(Value: <span data-bind="text:chosenCategory() ? chosenCategory().Value : 'unknown'"></span>)
</p>
In your second snippet of code, it is working because it is reading Text and Value properties from viewModel.categories, which are just empty. If you want to set a default, then you would want to do something like viewModel.chosenCategory = ko.observable(viewModel.categories()[0]);
Another alternative is to use a template for that section and pass in chosenCategory, as they handle nulls without any extra work. Although, it would just not render that section, rather than display something like 'Unknown'
Related
I checked other question but they don't seem to solve my issue.
Here is my code :
var app = angular.module('myApp', []);
app.controller('listdata', function($scope, $http) {
$scope.users = [{
"name": "pravin",
"queue": [{
"number": "456",
"status": "Unavailable"
},
{
"number": "111",
"status": "Unavailable"
}],
"phone": "7411173737"
},
{
"name": "pratik",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "8558855858"
},
{
"name": "priyanka",
"queue": [{
"number": "456",
"status": "Unavailable"
}],
"phone": "5454573737"
},
{
"name": "prerana",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "7454543737"
}];
$scope.filter111 = function (user) {
return (user.queue.find(({number}) => number === '111'));
}
$scope.filter456 = function (user) {
return (user.queue.find(({number}) => number === '456'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"></script>
<div ng-app="myApp">
<label class="switch">
<input type="checkbox" ng-model="queue111">111
</label>
<label class="switch">
<input type="checkbox" ng-model="queue456">456
</label>
<div class="row" ng-controller="listdata">
<div ng-repeat="user in users|filter: queue111? filter111: ''|filter: queue456? filter456: ''">
<p> {{user.name}} {{user.phone}}</p>
</div>
</div>
</div>
I have created custom functions $scope.filter111 and $scope.filter456 respectively to filter data
Currently when I click the checkbox 111, the filter return only the record whose queue has a number 111 and when I click the checkbox 456, the filter returns only the records whose queue has a number 456. This much is working perfectly. When I click both the filters it displays only that object whose queue has both the number 111 and 456 i.e an AND operation is occurring here.
Expected result : I want it such that when I click both the checkbox
it should display all the records from 111 as well as 456 together i.e an OR operation.
How do I do this?
You can try creating a custom angularJS filter by referring w3schools.com example and this link (for better understanding of custom filters).
In your case, the custom angularjs filter would take 3 inputs, i.e the list you want to filter and the value of the checkboxes- queue111 and queue456. Perform filtering and returning the data by providing necessary conditions based on the value of checkboxes inside the filter.
This also reduces the code that you use in your HTML for filtering inside ng-repeat from
<div ng-repeat="user in users|filter: queue111? filter111: ''|filter: queue456? filter456: ''">
<p> {{user.name}} {{user.phone}}</p>
</div>
to
<div ng-repeat="user in users|customFilter: queue111:queue456">
<p> {{user.name}} {{user.phone}}</p>
</div>
where
customFilter is the name (can be any name, provided that name as
an example) of the angularJS filter you create.
users will be the default first input of your custom filter and the value of your checkboxes will be the 2nd and 3rd input respectively.
Also, it would be helpful if you provide codepen/plunker demos so that people can debug your problem and provide solutions easily.
<select id="singleselect" ng-model="selectedQuestion" class="form-control select2"
ng-options="x.Title for x in tabnames">
</select>
now when i access the value if {{selectedQuestion.Title}} i am getting proper value,
when i am accessing value of {{selectedQuestion.ID}} also i am getting proper value,
what i actually need is value of {{selectedQuestion.ControlPrefix}} to be accessed in model(javascript) but it cannot be accessed neither in UI with {{selectedQuestion.ControlPrefix}} nor in model like
$scope.Newmodel = {
Title: "New Question Title",
ControlPrefix: $scope.selectedQuestion.ControlPrefix
};
basicaly i want the value inside the $scope.Newmodel.ControlPrefix variable i.e $scope.Newmodel.ControlPrefix
**tabnames array/objet is below**
{
"$id": "1",
"ID": 3,
"Title": "Text",
"ControlPrefix": "txt"
},
{
"$id": "2",
"ID": 4,
"Title": "Number",
"ControlPrefix": "num"
},
I don't See any problem with this, please check and verify -
var app = angular.module("myApp",[]);
app.controller("myCntr",function($scope){
$scope.tabnames = [
{
"$id": "1",
"ID": 3,
"Title": "Text",
"ControlPrefix": "txt"
},
{
"$id": "2",
"ID": 4,
"Title": "Number",
"ControlPrefix": "num"
},]
$scope.NewQuestionmodel = {
Title: "",
QuestionTypeID: "",
};
$scope.Dosomething = function(selectedQuestion){
$scope.NewQuestionmodel.Title = selectedQuestion.Title;
$scope.NewQuestionmodel.QuestionTypeID= selectedQuestion.ID;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCntr">
<select id="singleselect" ng-model="selectedQuestion" class="form-control select2"
ng-options="x.Title for x in tabnames" ng-change="Dosomething(selectedQuestion)">
</select>
<br>
<span>FRom UI - Selected Question Title : {{selectedQuestion.Title}} </span><br>
<span>From UI - Selected Question ID : {{selectedQuestion.ID}} </span><br>
<span>From UI - Selected Question ControlPrefix : {{selectedQuestion.ControlPrefix}} </span><br><br>
<br>
<span>Selected Question Title from Backend is {{NewQuestionmodel.Title}}</span><br>
<span>Selected Question ID from Backend is {{NewQuestionmodel.QuestionTypeID}}</span>
</div>
I am not able to copy a value from one field into the next. I used typeahead in po num. If I select po num value from typeahead simultaneously the quantity value is autofilled, and the value for copied quantity needs to be copied from the quantity. This is the link to ...my plunk...please help me on this issue. For instance:- If I select po num as 1356 from drop-down, the quantity value is fetched automatically gives as 100. I want the copied quantity value to reflect the same as 100.
I've Added the code that I've used below. Please do have a look and let me know where I've made the mistake. I know it could be something insanely small as well, please do help. Thanks in advance
my plunk
Controller:-
$scope.$watch('states.purchase_order_details_ord_no', function() {
if($scope.state && $scope.states.purchase_order_details_ord_no && $scope.states.purchase_order_details_ord_no.getTotalsshadeqty) {
$scope.copied = angular.copy($scope.states.purchase_order_details_ord_no.getTotalsshadeqty);
} else {
$scope.copied = null;
}
});
Html:-
<div ng-repeat="states in states.pocomments">
<label for="purchase_order_details_ord_no">po num</label>
<input type="text" ng-model="states.purchase_order_details_ord_no" id="purchase_order_details_ord_no" typeahead="type as type.purchase_order_no for type in types | filter: $viewValue">
<label for="quantity">quantity</label>
<input type="text" id="supname" ng-model="states.purchase_order_details_ord_no" typeahead="type.getTotalsshadeqty for type in types | filter: $viewValue">
<label for="quantitycopy">Copied quantity</label>
<input type="text" name="supnamecopy" id="supnamecopy" ng-model="copied">
</div>
My data:-
$scope.types = [
{
"_id": "5768e6c8bdbc5db509f0f2b2",
"created": "2016-06-21T07:03:36.504Z",
"getTotalsshadeqty": "100",
"getTotalsprice": "1000",
"getTotalsqtyprice": "100000",
"purchase_order_no": "1356",
},
{
"_id": "5767cd78f5012d790aa41a7b",
"created": "2016-06-20T11:03:20.382Z",
"getTotalsshadeqty": "12",
"getTotalsprice": "10",
"getTotalsqtyprice": "120",
"purchase_order_no": "0987",
}];
$scope.states = {
"_id": "575691b26a5ec735128fe635",
"pocomments": [
{
"_id": "575691d56a5ec735128fe636",
"po_value_currency": "Rs",
"value": "124",
"rate": "24",
"quantity": "",
"purchase_order_details_ord_no": ""
},
]
ng-repeat creates an isolated scope for the children created.
You need to add a $parent to the accessor of your model-properties if you want to change properties outside of the isolated scope.
Eg. ng-model="$parent.states.purchase_order_details_ord_no"
Additionally inside your watch-expression you mistyped states (you checked for state).
Fork that should work as expected: http://plnkr.co/edit/QAgJZToxkqvtg7pFSseO?p=preview
i am new to UI-Grid, i want to display two columns,as name and values. if i double click on cell in values column it get editable i.e its type=text. how to make cell to type checkbox, number or date. this colDefn type should get value from the data set.
code is as follows
$scope.gridOptions.data = [{
"index": 0,
"type": "Text",
"id": "name",
"title": "Name",
"value": "Some Name",
},
{
"index": 1,
"type": "date",
"id": "dob",
"title": "DOB",
"value": "1989-02-21T23:02:31+06:00",
},
{
"index": 2,
"type": "number",
"id": "age",
"title": "Age",
"value": 30,
}];
$scope.gridOptions.columnDefs = [
{ field: 'title', displayName: 'Name', enableCellEdit: false, width: '30%'},
{ field: 'value', displayName: 'Value', width: '50%'}]
I know to make columns specific to single type. But
How to make single column containing all types of fields like type="number" or "date" or "boolean(i.e is for checkbox)".
Kindly give your suggestions.
You can use a custom template, for example this one:
<div><div ng-if="!row.entity.typeCol || row.entity.typeCol === 'text' || row.entity.typeCol === 'date' || row.entity.typeCol === 'boolean'" >
<form
name="inputForm">
<input
type="INPUT_TYPE"
ng-class="'colt' + col.uid"
ui-grid-editor
ng-model="MODEL_COL_FIELD" />
</form>
</div>
<div ng-if="row.entity.typeCol === 'dropdown'">
<form
name="inputForm">
<select
ng-class="'colt' + col.uid"
ui-grid-edit-dropdown
ng-model="MODEL_COL_FIELD"
ng-options="field[editDropdownIdLabel] as field[editDropdownValueLabel] CUSTOM_FILTERS for field in editDropdownOptionsArray">
</select>
</form>
</div>
<div ng-if="row.entity.typeCol === 'file'">
<form
name="inputForm">
<input
ng-class="'colt' + col.uid"
ui-grid-edit-file-chooser
type="file"
id="files"
name="files[]"
ng-model="MODEL_COL_FIELD"/>
</form>
</div>
</div>
is a basic example of an editable cell whose type varies depending on the field typeCol.
I just copied and pasted the basic templates from ui-grid.edit and put an ng-if around each of them.
I have not tested this, but it's the only way to go, IMHO.
i'm trying to understand how controllers works in angularjs using cascade dropdowns. But my second dropdown is not being populated based on the previous dropdown value.
My JSON arry result:
[{
"id": "23031",
"fabricante": "ALFA ROMEO",
"modelo": "33",
"motor": "1.3 \/ 1.3 ie",
"combustivel": "Gasolina \/ GNV",
"ano_vela": "",
"ngk": "",
"ngk_green": "BPR6EY",
"gap": "0,7",
"ano_cabo": "",
"cabos_ngk": "",
"inicio": "",
"fim": "",
"seguimento": "4 RODAS",
"ano_bobina": "",
"bobina_ngk": "",
"pais": "Argentina",
"n_processo": "0"
}, {
"id": "23057",
"fabricante": "ARO",
"modelo": "Serie 10",
"motor": "1.4",
"combustivel": "Gasolina \/ GNV",
"ano_vela": "",
"ngk": "BP6HS",
"ngk_green": "",
"gap": "0,7",
"ano_cabo": "",
"cabos_ngk": "",
"inicio": "",
"fim": "",
"seguimento": "4 RODAS",
"ano_bobina": "",
"bobina_ngk": "",
"pais": "Argentina",
"n_processo": "0"
}]
My Controller EDITED:
angular.module('starter.controllers', [])
.controller('fabricanteController', ['$scope','$http', function($scope, $http) {
$http.get('JSON_PATH').success(function (data) {
$scope.fabricantes = data;
$scope.$watch('fabricante', function(newVal) {
if (newVal) $scope.modelo = data;
console.log($scope.modelo);
});
});
}]);
And my HTML:
<label class="item item-input item-select">
<div class="input-label">
Fabricante
</div>
<select ng-model="fabricante" ng-options="fab.fabricante for fab in fabricantes track by fab.fabricante">
<option value="" disabled="disabled">Selecionar</option>
</select>
</label>
<label class="item item-input item-select">
<div class="input-label">
Modelo
</div>
<select ng-model="modelo" ng-options="mod.modelo for mod in fabricantes">
<option value="" disabled="disabled">Selecionar</option>
</select>
</label>
Tried to look around how to make it work but no luck.
Any idea why?
If you wanna show the 'modelo' property of the selected 'fabricante' object you must point the ng-option of your second DDL to a new $scope array variable such:
$scope.modelos = [{"modelo": newVal.modelo}];
Your ng-options should be:
<select ng-model="test" ng-options="mod.modelo for mod in modelos">
Here is a working JSFiddle
Hope this helps.
Your watch isn't firing because you're passing in a string, not a variable. Also, I don't know where you're checking newVal, but it won't work like that..
Basic implementation:
$scope.$watch($scope.fabricante, function() {
$scope.modelo = data;
console.log($scope.modelo);
});
With newVal checking:
$scope.$watch($scope.fabricante, function() {
if($scope.modelo!=data)
{
$scope.modelo = data;
console.log($scope.modelo);
}
});
You can also use ng-change on the Select box, which will fire on any change.
<select ng-model="fabricante" ng-change="doSomething()" ng-options="fab.id for fab in fabricantes"></select>