Is there any way to bind textbox to select list without $Watch .
the Plunker
i don't want to let user type everything and bind to selectlist .
Thanks
So if you need to make a select and to display the result in your input without $scope.$watch just use the attribut disabled on the input. Try this :
<input type="text" ng-model="text.name" disabled/>
<select ng-model="text" ng-options="option.name for option in options">
</select>
In your controller :
app.controller('MainCtrl', function($scope) {
$scope.options = [{
name: 'a',
value: 'something-cool-value'
}, {
name: 'b',
value: 'something-else-value'
}];
You can try in your plunker this is working. Hope this helped.
Related
controller:
$scope.send_index = function(event, val){
console.log(val);
$scope.variable = 'vm.areas['+val+'].name';
console.log( $scope.variable );
};
and this is in the view:
<select ng-model="vm.areas">
<option ng-repeat="area in vm.areas" ng-value="area" id="{{area}}" ng-click="send_index($event, $index)">{{area.name}}
</select>
<input value="{{variable}}">
where "vm" is my model.
Expression inside of an expression (Angular)
my problem is that i need to have an {{array[]}}, with the index as another expression,
e.g: {{Array[{{val}}]}}.
Already tryed this:
$scope.variable = ''+'vm.areas['+val+'].name'+'';
The problem is in the view, "variable" is shown like an string
(vm.areas[0].name)
and it donst get the valor of that query.
This is NOT the correct way to use ng-model with a <select> element in AngularJS:
<!-- ERRONEOUS
<select ng-model="vm.areas">
<option ng-repeat="area in vm.areas" ng-value="area" id="{{area}}" ng-click="send_index($event, $index)">{{area.name}}
</select>
<input value="{{variable}}">
-->
There is no need to use the ng-click directive. The select directive handles that automatically. The ng-model directive receives or sets the chosen option.
See:
Using ng-repeat to generate select options
Using select with ng-options and setting a default value
angular.module('ngrepeatSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
model: null,
availableOptions: [
{id: '1', name: 'Option A'},
{id: '2', name: 'Option B'},
{id: '3', name: 'Option C'}
]
};
}]);
<script src="https://unpkg.com/angular/angular.js"></script>
<div ng-app="ngrepeatSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="repeatSelect"> Repeat select: </label>
<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
<option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>
</form>
<hr>
<tt>model = {{data.model}}</tt><br/>
</div>
Try data-ng-value instead of value
<input data-ng-value="{{variable}}">
So the main functionality I want is here, which is selecting an option from the drop-down menu and having it populate my input field.
JSFiddle:
<div ng-app="app" ng-controller="MainCtrl">
Two things I want to fix:
When typing into the input ("Email Subject") field I don't wan't it to change the drop-down menu option.
I want the input field to initialize with it's placeholder value of ("Email Subject") instead of initializing with "Select a Canned Response"
I'm assuming this means making the input field have a one-way data bind, but I'm not sure how to do this, any help is appreciated.
<div ng-app="app" ng-controller="MainCtrl">
<input ng-model="CannedResponse" placeholder="Email Subject"><!--change this-->
<div class="item item-input item-select" >
<div class="input-label"> </div>
<select ng-model="newSelectedITem" ng-options="CannedResponse as CannedResponse.label for CannedResponse in CannedResponses"
ng-change="yourFunction()"> <!--change this-->
<option value="{{item.value}}"> </option>
</select>
</div>
</div>
js code
angular.module('app', [])
.controller('MainCtrl', function($scope) {
$scope.CannedResponses = [{
label: 'Selet a Canned Response',
value: 0
}, {
label: 'Hi there whats up',
value: 1
}, {
label: 'Here is another response',
value: 2
}, {
label: 'Why not select this one?',
value: 3
}];
$scope.newSelectedITem = $scope.CannedResponses[0] //ADD THIS (X1)
$scope.CannedResponse='';//add this
$scope.yourFunction = function() {//add this function
$scope.CannedResponse = $scope.newSelectedITem.label;
};
});
see where I wrote change this. There where you have to change your code.
I have my controller in angularjs with a array
app.controller('player', function($scope) {
$scope.players = [
{
"id":3,
"name":"Nadal",
},
{
"id":4,
"name":"Federer"
}
]
});
In my HTML I have HTML with a dropdown and a textbox.
<html ng-app="pdl">
<body ng-controller="player">
<input type="text" id="name" value=""/>
<select name="id">
<option ng-repeat="player in players" value="{{player.id}}">{{player.id}}</option>
</select>
</body>
</html>
I want to update the input with a 'name' when I choose an option from the dropdown
Bind both select and input to the same ngModel:
angular.module('pdl', []).controller('player', function($scope) {
$scope.players = [{
"id": 3,
"name": "Nadal",
}, {
"id": 4,
"name": "Federer"
}]
});
<script src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<div ng-app="pdl" ng-controller="player">
<input type="text" ng-model="player.name" />
<select ng-model="player" ng-options="player as player.name for player in players">
</select>
</div>
And use ngOptions for selectbox.
The solution above works, but breaks if you want to amend the input value after its been written. In the example above change the word Nadal and the select is changed also as they are bound to the same value.
If want to amend the value of the input and you don't want to bind to the same ngModel, you could use ng-change on the select, and pass it the value you want to display in the input.
In this example I insert the "ng-change" statement on the select...
ng-change="change(model.action)"
and in the controller I update the scope for the input
$scope.change = function (str) {
$scope.model.action = str;
};
Every time you update the select the input will update too, but you can amend the input value without touching the select as they are bound differently.
I'm trying to get these dynamic filters working and its almost there I think. Looks like the model isn't being passed back to the watch function. I would've expected it to work with the first set of filters at least but it doesn't.
What I'm trying to achieve is that when the user selects an option from the select list and sets a value in the input box the data is filtered. The user can optionally add another set of filters by clicking the "add fields" button. If there user completes the second set of filters then the data is filtered further.
This is what I've got so far. If there's only one filter showing then shouldn't it just work?
This is the code that creates the user defined filters.
<div data-ng-repeat="filter in filters">
<select ng-model="filter.id">
<option value="age">Age</option>
<option value="customerId">CustomerID</option>
<option value="productId">ProductID</option>
<option value="name">Name</option>
</select>
<input type="text" ng-model="data.search[filter.id]">
<button class="remove" ng-show="$last" ng-click="removeFilter()">-</button>
Add fields
I think I'm almost there, got a better understanding of hierarchical scope. I've referred to a few tutorial and examples but I'm not quite there yet. I think my issue with this is that I'm not communicating the models properly. Still a little bit lost with this. Any further tips/suggestions would be great. I'm wondering if I should move some of he code from the controller in my directive into the resultsCtrl controller. Really not sure.
This fiddle gave me the idea to use filter.id within my template ng-repeat
This plnkr was helpful.
I'm getting somewhere now. This plnkr shows it working, the last thing I want to do with it is when you remove a filter it automatically updates the search object to remove the relevant filter.
Any suggestions on how to do this?
You are breaking the golden rule of "always have a dot in ng-model".
Why? because objects have inheritance and primitives do not.
ng-model="filterType"
is being defined inside a child scope created by ng-repeat. Because it is a primitive the parent scope in controller can not see it. However if it was a property of an object that was available at parent level, the reference would be shared between parent and child.
Once you fix that bug you will run into a bug where scope.search is not an object either so your $watch function will throw an exception also. In main controller can set:
$scope.search ={};
Do some reading up on how hierarchical scopes work in angular. There is plenty to be found in web searches and angular docs
I eventually got this solved :)
directive:
angular.module('dynamicFiltersDirective', [])
.directive('dynamicFilters', function() {
return {
restrict: 'AE',
scope: {
filtersArray: '=',
searchObject: '='
},
link: function(scope) {
scope.addFilter = function() {
var newItemNo = scope.filtersArray.length+1;
scope.filtersArray.push({'id':'filter'+newItemNo});
};
scope.removeFilter = function(option) {
var lastItem = scope.filtersArray.length-1;
scope.filtersArray.splice(lastItem);
delete scope.searchObject[option];
};
scope.updateFilters = function (model) {
scope.searchObject[model];
}
},
templateUrl: 'filtertemplate.html'
}
});
controller:
angular.module('app', ['dynamicFiltersDirective']).controller('resultsCtrl', function($scope){
$scope.filters = [{id: 'filter1'}];
$scope.search = {};
$scope.persons = [{
name: 'Jim',
age: 21,
customerId: 1,
productId: 4
},{
name: 'Frank',
age: 20,
customerId: 2,
productId: 4
},{
name: 'Bob',
age: 20,
customerId: 3,
productId: 5
},{
name: 'Bill',
age: 20,
customerId: 3,
productId: 5
}];
});
template:
<div data-ng-repeat="filter in filtersArray">
<select ng-model="filter.id">
<option value="age">Age</option>
<option value="customerId">CustomerID</option>
<option value="productId">ProductID</option>
<option value="name">Name</option>
</select>
<input type="text" ng-model="searchObject[filter.id]" ng-change="updateFilters(searchObject[filter.id])">
<button class="remove" ng-show="$last" ng-click="removeFilter(filter.id)">-</button>
</div>
<button class="addfields" ng-click="addFilter()">Add fields</button>
<div id="filtersDisplay">
{{ filters }}
</div>
index.html
<div ng-controller="resultsCtrl">
<dynamic-filters filters-array="filters" search-object="search"> </dynamic-filters>
<div ng-repeat="person in persons | filter: search">
{{person.name}}
</div>
Here's my example plnkr
I want to make my page a little lighter weight. I have some elements that have to be select options but I need them to load just as the user touches the control. Maybe display a loading dialog for a split second to give them feedback. How can I do this in Angular? I tried ng-click and ng-focus to trigger the model option population but it never fires.
<select name="Category" ng-model="selectedCategory" ng-options="item.name as item.name for item in categories">
<option value="" disabled selected>All Categories</option>
</select>
ng-focus should work. Just let $scope.categories start out as an empty array, and populate it in your ng-focus function:
$scope.categories = [];
$scope.selectedCategory = {};
$scope.loadOptions = function() {
if ($scope.categories.length == 0) {
$scope.categories = [{
name: 'option1'
}, {
name: 'option2'
}, {
name: 'option3'
}];
}
}
HTML:
<select name="Category" ng-model="selectedCategory"
ng-options="item.name as item.name for item in categories"
ng-focus="loadOptions()">
Plunker