In my case AngularJS's select is not a good fit - (with ng-repeat approach <option> values can only be strings and with ng-options I can't properly set the initial selected value).
What can I do to stop angular from applying select directive everywhere he sees <select> element ?
The reason I am asking this question, is because I want to apply a custom directive on select element, that would perform something similar like the original one, so they would be conflicting.
Is this what you need?
HTML:
<div ng-app="angularApp">
<div ng-controller="testCtrl">
<select ng-model="initialSelectedValue" ng-options="option for option in [1,2,3]"></select>
</div>
</div>
Javascript:
angular.module('angularApp', []);
function testCtrl($scope)
{
$scope.initialSelectedValue = 2;
}
I created the following jsfiddle for it.
Related
I have a directive and it works fine in a way such that when I type something the search() scope function inside my directive fires and sets $scope.query with the input text.
here is the directive template
<div class="container">
<div class="system-filter-header">
<div class="no-gutter">
<div class="system-search-wrapper search-wrapper-width">
<i ng-click="search($evt)" class="fa fa-search"></i>
<input type="text" ng-keyup=search($evt) class="search pull-left suggesstions-styles"
ng-model="query" ng-attr-placeholder="Search...">
</div>
</div>
</div>
</div>
here is the scope function which gets triggered
$scope.search = function() {
console.log($scope.query.length)
}
But when I used an ng-if="true" in first line of template (true used for generalizing only, I want to do a different conditional check inside ng-if) such that,
<div class="container" ng-if="true">
still the search gets triggered but the console.log gives always 0 and it doesn't seem to update the $scope.query value as it stays as $scope.query = ''
throughout the typing.
EDIT
Here is a an example codepen with almost similar behaviour. The problem is with the searchBox directive and I have added ng-if=true to the template but searching doesn't work. When I remove the ng-if searching works fine.
Any reason for this?
Rule of thumb in AngularJS: your ng-model should always include a dot. Otherwise AngularJS directives that create child scopes (like ng-if or ng-repeat) will create a duplicate property on that child scope instead of the parent scope. Following the controllerAs convention completely mitigates this behavior.
I cannot seem to get the correct way to set the 'checked' attribute in ons-switch. This is so that I can setup user configurations page with pre-checked select boxes.
The Docs:
This is a checked switch but how do I set this using a variable in an angular controller?
For example, if ons-switch has a syntax like
I could have done:
I cannot seem to set attribute "checked" with no value in angular, as needed in the docs. I'm also unable to access the variable since it is part of an array of configurations.
Code Example:
controller:
var categInfo = [{Interest:'Classic', isChecked:true}, {Interest:'New', isChecked:false}];
html:
<ons-list-item ng-repeat="interest in categInfo" >
<span style="color: #666">{{interest.Interest}}</span>
<ons-switch modifier="list-item" var="{{interest.Interest}}" checked="{{interest.isChecked}}"></ons-switch>
</ons-list-item>
So what I want is that the html should show buttons that are checked/unchecked depending on interest.isChecked is true or false.
First of all, you need to bind the switch with ng-model, this will allow you to manage the ons-switch behavior directly from the controller. Setting the variable true or false, inside the controller, will automatically change the value of the state of the switch, same thing if you change the state from the switch (AngularJS binding).
If you want to check the status of the switch, you need to check the model value.
Here is a CodePen example. and the relative code.
HTML
<div ng-controller="MyController">
<ons-switch ng-model="switch"></ons-switch>
<ons-button ng-click="changeSwitch()">Change switch status</ons-button>
</div>
Controller
ons.bootstrap()
.controller('MyController', function ($scope) {
$scope.changeSwitch = function() {
$scope.switch = !$scope.switch;
if($scope.switch)
alert('checked');
else
alert('unchecked');
};
});
EDIT: SWITCH ARRAY EXAMPLE
Due to an Onsen UI bug about the initialization of the ons-switch element, I suggest you to use the following code to implement your switch.
<label class="switch">
<input type="checkbox" class="switch__input" checked>
<div class="switch__toggle"></div>
</label>
The appearance will be the same as the ons-switch element. This bug will be fixed in Onsen UI 1.4 release, so you can start using again the switch element after its release.
For what concerns the behavior of an array of switches, it's analog of the single switch. You still need to use 'ng-model' to bind the status of the switch. You are using ng-repeat to display the switch elements so, by using ng-model="item.isChecked", every element will be binded with the relative isChecked value inside the array. Here you can find a working CodePen example, and this is the relative code:
HTML
<div ng-controller="MyController">
<h2>What I am trying</h2>
<div ng-repeat="item in categInfo">
<div>This button should be {{item.isChecked}}</div>
<label class="switch">
<input ng-model="item.isChecked" type="checkbox" class="switch__input" checked>
<div class="switch__toggle"></div>
</label>
</div>
</div>
Controller
ons.bootstrap()
.controller('MyController', function ($scope, $timeout) {
//Need to go through the array and set as checked or not
$scope.categInfo = [{Interest:'Classic', isChecked:true}, {Interest:'New', isChecked:false}];
});
In my Angular project, I am using a particular value that in my controller is called something like:
$scope.feature1.items.thisItem
There's a particular <div> in my view that uses thisItem many times and it's quite messy to be referring to it as {{feature1.items.thisItem}} for example:
<div id="{{feature1.items.thisItem}}header>
<h1> You've reached the section about {{feature1.items.thisItem}} </h1>
</div>
Is there any way to rename this variable in the view? I would like to simply call it one. I've tried {{feature1.items.thisItem as one}} but that didn't work. Any other ideas?
Yes! ng-init was designed for this very purpose - aliasing another variable:
<div ng-init="thisItem = feature1.items.thisItem">
<h1> You've reached the section about {{thisItem}} </h1>
</div>
I would advise against using ng-init, it's not designed for this purpose. From Angular's documentation:
The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.
You'll want to create a custom controller for this purpose. Something like the following:
module.controller('RenameController', function($scope) {
$scope.one = null;
$scope.$watch('feature1.items.thisItem', function(value) {
$scope.one = value;
});
});
Yes you can use ng-init on the top of your DOM element
<div ng-app='app'>
<div ng-controller="MyController" ng-init="myVar=feature1.items.thisItem">
{{myVar}}
</div>
</div>
I am new to angularjs and just started learning it. I am trying to build a dropdown equivalent from angularjs without using select.
Html
<div ng-app="App" ng-controller="OrderExportCtrl" >
<li class="box-ddl" >
<div ng-model="fruit" ng-options="f for f in fruits" class="ddlListSmall">
</div>
</li>
JavaScript
var app = angular.module('App', []);
app.controller('OrderExportCtrl', function ($scope) {
$scope.fruit = ['apple', 'orange', 'mango', 'grapefruit', 'banana', 'melon'];
});
Please find the JsFiddle here. I am not getting what mistake I am doing, but my dropdown is not binding.
Please guide me to fix my issue.
ngOptions is only for select elements (it is used by the select directive). You can use ngRepeat to achieve the same result. You can use ngClick to set your model directly.
<div class="list">
<div class="option" ng-repeat="f in fruits" ng-bind="f"
ng-click="fruit.selected = f"></div>
</div>
Make sure the value you're setting is inside an object that is defined in the controller, otherwise you'll just set it inside the row's scope rather than the controller's. Alternatively use ng-click="$parent.fruit = f" to reference the parent scope, which in this case is the controller's (but may not always be).
I have an array of objects and when i go to populate the select with the elements, it doesn't pre-select the currently active one. If i change the select it all works as intended, but the pre-selected element is not selected on page load.
JS:
$scope.license_year_list = [
{label:"Year of 1991", value:1991},
{label:"Year of 1992", value:1992} ];
$scope.item = {license_year: {label:"Year of 1992", value:1992}};
HTML:
<div ng-controller="MyCtrl">
<select ng-model="item.license_year"
ng-options="y.label for y in license_year_list">
</select>
</div>
Fiddle:
http://jsfiddle.net/eXvH8/
Angular checks for equality based on reference of the actual object/value. To make your select box start out with the default value, do a simple assignment of the default value. Change your code like this:
HTML:
<div ng-controller="MyCtrl">
<select ng-model="item" ng-options="y.label for y in license_year_list"></select>
<br/><br/><br/>
{{item.license_year}}
</div>
JS:
function MyCtrl($scope) {
$scope.license_year_list = [{label:"Year of 1991", value:1991}, {label:"Year of 1992", value:1992}];
$scope.item = $scope.license_year_list[1];
}
The equality of the objects are evaluated by reference, so you need use the exactly same object when you want to select it.
$scope.item = {
license_year: $scope.license_year_list[1]
};