Autofill html select AngularJS - html

I have a little issue with a HTML select with AngularJS. When I do a petition to my API I get one of the values as an integer, but when I try to autofill a select with it I can't set de "value" correctly.
In this picture you can se what the HTML is receiving and the values that I want to set
Are there any way to cast this value?
Thanks in advance :)
EDITED:
The controller to get customer data and fill the form
.controller('CustomerDetailCtrl', ['Customer', '$scope', '$sessionStorage', '$stateParams', '$ionicPopup', function (Customer, $scope, $sessionStorage, $stateParams, $ionicPopup) {
if ($sessionStorage.auth) {
Customer.get({data: $stateParams.customerId + '_' + $sessionStorage.user_id}).$promise.then(function (data) {
if (data.response && $sessionStorage.role === 1) {
$scope.customer = data.response[0];
if (data.history) {
$scope.histories = data.history;
}
} else {
console.log('Error de accesso...');
}
})
}
$scope.addTask = function (customer) {
alert('add task!');
}
$scope.deleteTask = function (customer, history) {
alert('delete task!');
}
}])
The form:
<label class="item item-input item-select">
<div class="input-label">
Cliente avisado?
</div>
<select name="informed" ng-model="customer.informed" required>
<option value="0">NO</option>
<option value="1">SI</option>
</select>
</label>
And here a picture of the data from de API:

I know that you've already received an answer on this, but I wanted to show you one other potential option that doesn't involve having to change your data from an int to string. If you define the options for your select in your controller (or in a service if this will be used in multiple different places throughout your app) then you can take advantage of ng-options and its ability to use a value other than a string.
Here's an example (obviously I've hardcoded some things and put this all in a single module - not something you'd do in a real app).
JS:
angular.module('app', [])
.controller('ctrl', function($scope){
// select options (if these are common maybe store them in a service
// so you can share them in many controllers without duplicating the code)
$scope.selectOptions = [
{
text: 'NO',
value: 0
},
{
text: 'SI',
value: 1
}];
// sample data
$scope.customer = {
address: 'San Rosendo 11',
date: '2016-03-16T16:19:13+0100',
email: 'Montes',
equipment: 'PC',
id: 262,
informed: 1,
lastName: 'Montes',
location: 'Tienda',
name: 'Juanma',
notes: '',
pass: 'no tiene',
phone: '900112233',
price: '0',
status: 'Pendiente',
tasks: 'dfsdf'
};
});
HTML:
<div ng-app='app' ng-controller='ctrl'>
<select ng-model='customer.informed' ng-options='option.value as option.text for option in selectOptions'></select>
</div>
jsFiddle

Define a default value somewhere in your controller: $scope.customer.informed = "NO";

Related

How to change value in a select with ng-options by code?

I'm working on a project with angularjs, in which I have three DDLs on a page (HTML), created by "select" using "ng-options", once I selected the three DDLs, when I selected the first DDL, I put in an initial state the other two (select an option), but it does not happen as they remain with the selected value or blank.
On the side of the controllers in .js, in the variable that is linked to each of the ng-model of the ddl, they set the default object ($ scope.selectedActive= $ scope.default_option;), but it does not work
When you change each of the ddls, I see that class ng-dirty and ng-valid class (class = "molecule_list ng-valid ng-dirty") I think that there goes the problem.
This is the code in the HTML
<select id="ddl_actives" name="ddl_actives" ng-model="selectedActive" class="molecule_list" style="width:180px;" ng-options="active.text for active in Actives_list | orderBy: 'text'" ng-change="Select_molecule(selectedActive)"></select>
<select id="ddl_submission" name="ddl_submission" class="molecule_list" ng-model="selectedsubmission" ng-options="event.text for event in submissionEvent_list track by event.value" ng-change="Select_submission(selectedsubmission)"></select>
<select id="ddl_authority" name="ddl_authority" class="molecule_list" ng-model="selectedauthority" ng-options="authority.text for authority in authority_list | orderBy: 'text'" ng-change="OpenMenu_Authority(selectedauthority)"></select>
this is the code in the .js
How id load each DDL
$scope.loadActives = function () {
var dow_user_id = Cookies.get('username');
EndpointsService.GetList_Actives.query({ dow_user_id: dow_user_id }, {}).$promise.then(function (data) {
$scope.Actives_list = data;
//SCP-513
$scope.Actives_list.unshift($scope.default_option);
$scope.selectedActive = $scope.default_option;
}, function (error) {
if (error.data.Message != undefined)
alert(error.data.Message + '\n' + 'Detail: ' + error.data.ExceptionMessage);
else
alert('An error has occurred while loading the Actives list\nDetail: at service "GetList_Actives"');
});
};
This is an example of the code I use to reset value in the ng-model of the ddl.
$scope.Select_molecule = function (selectedActives) {
$scope.selectedActive = $scope.default_option;
$scope.selectedauthority = $scope.default_option;
};
my expectation is that when selecting the first ddl the other two show the option of (Select an option)
The default option cannot be selected in other dropdowns if it doesn't exist as an option to be selected, i've taken your code and made some adjustments to it.
Here is it :
HTML :
<select id="ddl_actives" name="ddl_actives" ng-model="selectedActive" class="molecule_list" style="width:180px;" ng-options="active.text for active in Actives_list | orderBy: 'text'" ng-change="Select_molecule(selectedActive)"></select>
<select id="ddl_submission" name="ddl_submission" class="molecule_list" ng-model="selectedsubmission" ng-options="event.text for event in submissionEvent_list" ng-change="Select_submission(selectedsubmission)"></select>
<select id="ddl_authority" name="ddl_authority" class="molecule_list" ng-model="selectedauthority" ng-options="authority.text for authority in authority_list | orderBy: 'text'" ng-change="OpenMenu_Authority(selectedauthority)"></select>
Controller :
$scope.submissionEvent_list = [];
$scope.authority_list = [];
$scope.loadActives = function () {
$scope.default_option = {
text: 'default'
};
$scope.Actives_list = [
{
text: 'test',
value: 'a value'
},
{
text: 'test2',
value: 'another value'
}
];
$scope.submissionEvent_list.unshift($scope.default_option);
$scope.authority_list.unshift($scope.default_option);
$scope.Actives_list.unshift($scope.default_option);
$scope.selectedActive = $scope.default_option;
};
$scope.loadActives();
$scope.Select_molecule = function (selectedActives) {
$scope.selectedsubmission = $scope.default_option;
$scope.selectedauthority = $scope.default_option;
};
Notice that the other dropdown are filled with the default option but it's not selected until the change is made in the first dropdown.
Hope this will help.

Knockout Select2 set initial value by object

I have a Knockout.js web application where I have a select2 dropdown. I want to bind both the id and text values to a variable instead of just the id. Here's my data:
var cars = [{id: 1, name: 'Honda'}, {id: 2, name: 'Toyota'}, {id: 3, name: 'Dodge'}];
var selectedCar = ko.observable();
Here's my html:
<select data-bind="value: selectedCar, optionsCaption: 'Select', optionsText: 'name', options: cars"></select>
So now, whenever I select something in the dropdown my variable contains the entire object like so:
selectedCar = {id: 1, name: 'Honda'};
The only problem occurs when you load the page and want the dropdown to be set to a specific value. Even though before rendering the html the selectedCar variable is set to {id: 1, name: 'Honda'} when the page renders the dropdown is not set to anything, it just is set to the placeholder 'Select'.
What am I doing wrong?
If you want to bind both the id and text value to a variable, you need to use the optionsValue binding and bind the entire context to it ($data);
<select data-bind="value: selectedCar,
optionsCaption: 'Select',
optionsText: 'name',
options: cars,
optionsValue: $data"></select>
Normally we would specify the id or whatever to get an initial value selected. So it would make sense like in your question to supply the entire object {id: 1, name: 'Honda'} as the initial value to selectedCar if wet set optionsValue: $data and not $optionsValue: 'id'.
(IMPORTANT) But turns out this doesn't work, because we're creating a new object and so Knockout's equality test will fail when it compares the objects of cars with the object inside selectedCar. The correct way to set the initial value is cars[0].
I'm sure this is a typo, but I'll specify anyway: when you create any variable that needs to be accessed by the HTML you need to bind it to this, which would be a reference to the viewModel.
this.cars = [{id: 1, name: 'Honda'}, {id: 2, name: 'Toyota'}, {id: 3, name: 'Dodge'}];
this.selectedCar = ko.observable();
Let's test all this with a fiddle:
var viewModel = function(){
var self = this;
self.cars = [{id: 1, name: 'Honda'}, {id: 2, name: 'Toyota'}, {id: 3, name: 'Dodge'}];
self.selectedCar = ko.observable(self.cars[0]);
};
ko.applyBindings(new viewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="value: selectedCar, optionsCaption: 'Select', optionsText: 'name', optionsValue:$data, options: cars"></select>
<!-- to verify that we are getting the entire object -->
<p data-bind="text: ko.toJSON(selectedCar)"></p>
The value of a select box will become the object that corresponds to the selected item or the property set in the optionsValue parameter. So in the case of objects, the selected value you set must be the same instance that exists in the array. Having a different instance of an object happens to be structurally equivalent is not enough.
For situations like this, I find it easier to bind the value of the select box to a unique id for the object instead. Then you could map out that id to the actual instance that you want through a computed value.
function ViewModel(data) {
this.cars = data.cars;
this.selectedCarId = ko.observable(data.selectedCarId);
this.selectedCar = ko.computed(() => {
let selectedCarId = this.selectedCarId();
return this.cars.find(c => c.id === selectedCarId);
});
}
let model = {
cars: [
{ id: 1, name: 'Honda' },
{ id: 2, name: 'Toyota' },
{ id: 3, name: 'Dodge' }
],
selectedCarId: 2
};
ko.applyBindings(new ViewModel(model), document.getElementById('content'));
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div id="content">
<select data-bind="value: selectedCarId,
optionsCaption: 'Select',
optionsText: 'name',
optionsValue: 'id',
options: cars">
</select>
<p>selectedCarId: <span data-bind="text: selectedCarId"></span></p>
<p>selectedCar: <span data-bind="text: ko.toJSON(selectedCar)"></span></p>
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
</div>
If you'd rather not use a separate computed property, you would still need to pass in an index, but the value you set, must be obtained from the array.
function ViewModel(data) {
this.cars = data.cars;
this.selectedCar = ko.observable(
data.cars.find(c => c.id === data.selectedCarId)
);
}

React : using nothing but functions?

I am a beginner in developing with React. I learned with the Facebook documentation. I practice with the "Thinking in React" example (go to it). But I tried to change the solution by using nothing but functions.
Here is the result :
function ProductCategoryRow({category, key}) {
return <tr><th colSpan="2">{category}</th></tr> ;
}
function ProductRow({product, key}) {
var name = product.stocked ? product.name :
<span style={{color: 'red'}}>
{product.name}
</span>;
return (
<tr>
<td>{name}</td>
<td>{product.price}</td>
</tr>
);
}
function ProductTable({products, filterText, inStockOnly}) {
var rows = [];
var lastCategory = null;
products.forEach((product) => {
if (product.name.indexOf(filterText) === -1 || (!product.stocked && inStockOnly)) {
return;
}
if (product.category !== lastCategory) {
rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
}
rows.push(<ProductRow product={product} key={product.name} />);
lastCategory = product.category;
});
return (
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
function handleFilterTextInput(event) { filterText = event.target.value; refresh() }
function handleInStockInput(e) { inStockOnly = e.target.checked; refresh()}
function SearchBar({filterText, inStockOnly, onFilterTextInput, onInStockInput}) {
return (
<form>
<input
type="text"
placeholder="Search..."
value={filterText}
onChange={onFilterTextInput}
/>
<p>
<input
type="checkbox"
checked={inStockOnly}
onChange={onInStockInput}
/>
{' '}
Only show products in stock
</p>
</form>
);
}
var filterText = "";
var inStockOnly = false;
function FilterableProductTable({products}) {
return (
<div>
<SearchBar
filterText={filterText}
inStockOnly={inStockOnly}
onFilterTextInput={handleFilterTextInput}
onInStockInput={handleInStockInput}
/>
<ProductTable
products={PRODUCTS}
filterText={filterText}
inStockOnly={inStockOnly}
/>
</div>
);
}
var PRODUCTS = [
{category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
{category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
{category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
{category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
{category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
{category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];
function refresh() {
ReactDOM.render(
<FilterableProductTable products={PRODUCTS} />,
document.getElementById('container')
);
}
refresh();
It works well but :
could I go on this way ?
is there any method to refresh de document in a better way that re-render from the root of the tree ?
Any other comment would be appreciated
You are using functional components in your implementation. These are fine to use for 'stateless' components. However, if a component has properties that will change, for example, the text in your search bar, then you will want to use React state to handle these changes. Changes on state and props of a component are the two main ways that React intelligently manages re-rendering/ refreshing.
There is no need to re-implement a refresh() function, since the power of React comes from its ability to automatically handle re-rendering based on changes to the state of our components.
Hopefully this information helps. I would recommend watching the Intro to React video and to get a grasp of what React does and why developers use it
Thanks for the informations.
I have played the video "Intro to React". It is useful for me.
But when I see the Facebook documentation that says :
ReactDOM.render() controls the contents of the container node you pass
in. Any existing DOM elements inside are replaced when first called.
**Later calls use React’s DOM diffing algorithm for efficient
updates**.
I wonder why I could not go on with my "refresh" method.
Indeed I am reluctant to dive into Class (that are not real classes !) component, state (that seam's very hard to define correctly) and all that constructor, super, props, this, lifecycle ....... carrying all the this.props. and this.state. notations ....
Certainly I will encounter some situations were it's mandatory but I would be very please to delay this as much as possible !!!

How to get a specific value from drop-down list

I have the following html:
<td>
{%verbatim%}
<select ng-model="s_value" class="form-control">
<option ng-repeat="s in severity_list" ng-value="s.rank" >{{s.rank}}-{{s.generic_value}}</option>
{%endverbatim%}
</select>
</td>
I need to only display the rank(integer value) in my form/table. But its actually getting both the integer and string value into the field. How can I prevent that and only display the integer value? Any idea guys? Thanks in advance
As per going through the answers I have updated my question with the severity_list, Is there any changes because of the edit guys?
$scope.severity_lists = function(){
console.log('Stage1: Loading Sods..... ');
$http.get('{% url "severities" %}').success(
function(data){
$scope.severity_list = data['objects'];
}).error(function(data, status){
console.log('Stage1: Internal error while loading initial data:'+status );
});
};
$scope.severity_lists();
Editted to display the problem to SK:
You should use ng-options really
edit: read your other comment and realised you might want this
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.severity_list = [{
rank: 1,
generic_value: 'severe'
}, {
rank: 2,
generic_value: 'not so bad'
}];
$scope.initialiseOptions = function() {
for (i = 0; i < $scope.severity_list.length; i++) {
$scope.severity_list[i].Text = $scope.severity_list[i].rank + '-' + $scope.severity_list[i].generic_value;
}
}
$scope.initialiseOptions();
$scope.dropdownChanged = function() {
if($scope.s_value){
$scope.initialiseOptions(); // reset our previous selections
$scope.s_value.Text = $scope.s_value.rank;// Set our display to only rank after its chosen
}
};
});
<!DOCTYPE html>
<html ng-app="app">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="MainCtrl">
<select ng-model="s_value" class="form-control" ng-options="option as option.Text for option in severity_list" ng-change="dropdownChanged()">
</select>
Selected:{{s_value}}
</body>
</html>
After reviewing the comments, I can suggest something like the following?
It's not brilliant but it demonstrates an approach, here is the fiddle:
http://jsfiddle.net/LXAt7/573/
<select ng-model="s_value" class="form-control" ng-hide="!editMode" ng-options="s.rank as (s.rank + ' - ' + s.generic_value) for s in severity_list" ng-change="valueChanged()">
</select>
<input type="text" ng-model="s_value" ng-show="!editMode" ng-click="changeToEditMode()" />
It's worth noting that using ng-options is a cleaner approach. - https://docs.angularjs.org/api/ng/directive/ngOptions
I'm not familiar with this verbatim tag, but it does seem out of position, should it not be below the </select>?
You can try something like this. I've tried to keep it simple:
var app = angular.module("Demo", []);
app.controller("AppController", function($scope) {
$scope.severity_list = [{
rank: 1,
generic_value: "High"
}, {
rank: 2,
generic_value: "Mid"
}, {
rank: 3,
generic_value: "Low"
}];
$scope.getVal = function(ind) {
if ($scope.selectedValue != undefined && $scope.selectedValue == $scope.severity_list[ind].rank) {
$scope.severity_list[ind].viewValue = $scope.severity_list[ind].rank;
} else {
$scope.severity_list[ind].viewValue = $scope.severity_list[ind].rank + '-' + $scope.severity_list[ind].generic_value;
}
return $scope.severity_list[ind].viewValue;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Demo">
<div ng-controller="AppController">
<select ng-model="selectedValue">
<option value="">--Select--</option>
<option ng-repeat="s in severity_list" value="{{s.rank}}">
{{ getVal($index) }}</option>
</select>
<span ng-show="selectedValue">Selected Value: {{ selectedValue }} </span>
</div>
</div>
JsFiddle: https://jsfiddle.net/sktajbir/6fmvsaf0/21/
Here selected value will be always rank because of this code in the option tag:
value="{{s.rank}}"
If you want full object as selected object then you can try:
value="{{s}}"
I hope this will help you to think further. Thanks.

Refresh the page content or the just the search results part like in google

After I erase the query I searched on input field of form-control, results still remain on the page until I refresh the page. Is there a way I can make the content go away when field is cleared?. I am pulling this data from database at work
<div>
<input id="NDC_Code" type="text" class="form-control" name="name" placeholder="Enter name"
ng-model="name" autofocus/>
</div>
</br></br>
<div>
<input id="address" type="text" class="form-control" name="address" placeholder="Enter address"
ng-model="address" />
</div>
Here is my approach to it, but maybe someone might have a better approach. So the idea is to have a Search Button like so:
<button ng-click="getData()" ng-disabled="!showResult()">search</button>
this button will go a get the data and make a boolean flag to true so you can know that the user already searched:
$scope.getData = function() {
// GET DATA
$scope.results = [{
name: 'Josh',
address: '234 nis'
}, {
name: 'Chris',
address: '234 sdf'
}, {
name: 'Scott',
address: '234 nis'
}, {
name: 'Pat',
address: '234 sd'
}, {
name: 'Jose',
address: '234 sd'
}];
// USER HAS SEARCHED TO TRUE
$scope.hasSearched = true;
};
now you only display the result if the inputs contain text using a function that returns a boolean, but in that function you also check if the user has searched. if the user has search and the inputs are empty you clear the results variable:
// RETURNS TRUE OR FALSE IF INPUTS ARE EMPTY AND ALSO CHECKS IF USER HAS SEARCHED TO CLEAR RESULTS
$scope.showResult = function() {
if ((!$scope.name && !$scope.address && $scope.hasSearched)) {
$scope.results = [];
// USER HAS SEARCHED TO FALSE
$scope.hasSearched = false;
}
return $scope.name && $scope.address;
};
Now, this is just my 3 second approach. Full Code in Plunkr