I have a form that has a set of radio buttons (3 choices), and I am using angular and the ng-repeat directive to populate the html:
<div ng-repeat="fruit in fruitbasket">
<input type="radio" name="fruit" data-ng-model="fruit.isSelected">{{fruit.id}}
</div>
the inside of the controller for the fruit basket looks like this:
$scope.fruitbasket = [{isSelected: false, id: "Orange", value: "1"}, {isSelected: true, id: "Pear", value: "2"}, {isSelected: false, id: "Apple", value: "3"}]
The choices in the view are Orange, Pear, and Apple, but after one is selected I want to pass the numeric "value"
Not sure how to do this in angular, I have tried several things, but non successful. Each time the passed value shows as nil
How does a connected element of an object get passed from a radio button in Angularjs?
Here's how you do it:
isSelected is not needed. The fruitbasket is not part of your model, only the selected fruit is.
$scope.fruitbasket = [
{id: "Orange", value: "1"},
{id: "Pear", value: "2"},
{id: "Apple", value: "3"}
];
$scope.model={selectedFruit:2};
Assign the value (fruit.value) to each option and bind it to your model (model.selectedFruit)
<input value="{{fruit.value}}" data-ng-model="model.selectedFruit" type="radio" name="fruit" > {{fruit.id}}
Check out this working plnkr example.
Related
I need your help.
I'm implementing multiple dropdowns using ng-repeat from json. And I want that once value is selected in one dropdown it should not appear in another dropdowns. i'm new in angularjs. here is my json. I want "data" in drop down with selected value columnindex.
$scope.records = [
{
"userId": "10",
"fisrtname": "Unnati",
"lastName": "Chauhan",
"dateVal": "22-05-2016",
"columnindex": "1",
"data": [{value: 1, text: 'USERID'},
{value: 2, text: 'FIRSTNAME'},
{value: 3, text: 'LASTNAME'},
{value: 4, text: 'DOB'}]
},
{
"userId": "20",
"fisrtname": "Ranju",
"lastName": "Shinde",
"dateVal": "21-05-2016",
"columnindex": "2",
"data": [{value: 1, text: 'USERID'},
{value: 2, text: 'FIRSTNAME'},
{value: 3, text: 'LASTNAME'},
{value: 4, text: 'DOB'}]
},
{
"userId": "30",
"fisrtname": "Smruti",
"lastName": "Modi",
"dateVal": "20-05-2016",
"columnindex": "3",
"data": [{value: 1, text: 'USERID'},
{value: 2, text: 'FIRSTNAME'},
{value: 3, text: 'LASTNAME'},
{value: 4, text: 'DOB'}]
}];
my html code is
<div ng-controller="multipleDropDown">
<div ng-repeat= "us in records" >
<select ng-model="us.columnindex" ng-options="item.value as item.text for item in us.data|arrayDiff:us.data:item.value">
</select>
</div>
</div>
you need to add below code in your dropdown elements so as to avoid recursive calls to all three of your dropdowns during change in ng-model values.
ng-model-options="{ updateOn: 'change', debounce: { change: 0 } }"
Also there is a function which updates data object of your $scope.records array. Please take a look at this fiddle. I think this is what the specific thing is which you wanted.
I need to implement angular js typeahead directive for searching cities based on a particular country. Both should be autocomplete dropdowns.
That is when I type in the country text box it should show me suggestions of countries in the dropdown for the keyword i type.
When i type in city text box it should show me suggestions of cities related to only the selected country.
I have implemented the typeahead feature only for 1 textbox.
Now i need to search cities based on a selected country.
for example, if my json is as follows
$scope.data = [{
countries: [{
id: 1,
name: country1
},
{
id: 2,
name: country2
},
{
id: 3,
name: country3
}]
cities: [{
id: 1,
city_name: 'city1'
country_id: 1
}, {
id: 2,
city_name: 'city2'
country_id: 2
}, {
id: 3,
city_name: 'city3'
country_id: 2
}, {
id: 4,
city_name: 'city4'
country_id: 3
}],
}];
and if i have selected country2 in first text box then in the second text box it should display only city2 and city3 since they belong to country2
You can use a filter.
adding filter syntax to html
<input ng-model="selectedCtry"
typeahead="ctry as ctry.name for ctry in data.countries"/>
<input ng-model="selectedCity"
typeahead="city as city.name for city in data.cities | filter:{ country_id: selectedCountry.id }"/>
example - http://codepen.io/jusopi/pen/jWyXeL?editors=101
In country textbox make a call to server on blur and pass country, or country ID; and get list of city according to country
I have created a select box in two different ways with AngularJS. One with static options in the HTML and ng-model and one with ng-options.
Both populate the select box, however, when a value comes back from the REST API the select box stays blank.
The docs suggest tracking by id.
<select id="delimiter" name="delimiter" ng-model="config.delimiter"
ng-options="option.name for option in data.availableOptions track by option.id">
</select>
$scope.data = {
availableOptions: [
{id: '44', name: 'Comma'},
{id: '9', name: 'Tab'},
{id: '32', name: 'Space'},
{id: '124', name: 'Pipe'},
{id: '59', name: 'Semi-Colon'},
{id: '58', name: 'Colon'}
],
selectedOption: {id: '44', name: 'Comma'} //This allegedly sets the default value of the select in the ui
};
//Truncated version of what happens after API call
$scope.config = $scope.result.selectedConfig;
The data that comes from the server contains the numbers i.e. the ids.
The config option is supposed to have the delimiter set on it and then the select box is supposed to select the correct item, but it doesn't.
However, a simple example like this DOES work at selecting the correct item so it must be something with the binding after the REST call.
<body ng-app ng-controller="AppCtrl">
<div>
<label>Delimiter</label>
<select ng-model="mydelimiter">
<option value="44">Comma</option>
<option value="9">Tab</option>
<option value="32">Space</option>
<option value="124">Pipe</option>
<option value="59">Semi-Colon</option>
<option value="58">Colon</option>
</select>
</div>
</body>
function AppCtrl($scope) {
$scope.mydelimiter = '59';
}
I'm not sure if this is exactly what you were looking for but if you'er just trying to set a specific default value, set the model to the selectedOption
$scope.config = {};
$scope.data = {
availableOptions: [
{id: '44', name: 'Comma'},
{id: '9', name: 'Tab'},
{id: '32', name: 'Space'},
{id: '124', name: 'Pipe'},
{id: '59', name: 'Semi-Colon'},
{id: '58', name: 'Colon'}
],
selectedOption: {id: '44', name: 'Comma'}
};
$scope.config.delimiter = $scope.data.selectedOption;
Or you could set it directly from the array:
$scope.config.delimiter = $scope.data.availableOptions[0];
Here's a fiddle with a working example:
http://jsfiddle.net/pkobjf3u/1/
I am new to angularjs, i want to use dropdownlist with treeview structure. i used both dropdownlist and treeview control separately but find difficulty in using together. can anyone have idea about how to use both together(dropdownlist+treeview)
You can use simple select control. I hope you are grouping values by some property. Lets say you have following data structure:
$scope.data = [
{
id: 1,
value: "Cat",
type: "Animal"
},
{
id: 2,
value: "Dog",
type: "Animal"
},
{
id: 3,
value: "Lion",
type: "Animal"
},
{
id: 4,
value: "Parrot",
type: "Bird"
},
{
id: 5,
value: "Sparrow",
type: "Bird"
},
];
You can group your data by "type" field and show a treeview dropdown as follows:
<select ng-options="obj.value group by obj.type for obj in data track by $index"></select>
For more details you can look at https://docs.angularjs.org/api/ng/directive/ngOptions
I have a JSON object in the following format:
{
filters: [
{Name: "pork",
Active: true},
{Name: "beef",
Active: true},
{Name: "chicken",
Active: false}
]
}
I am constructing a SELECT list with the following:
ng-options="item.Name for item in filters"
I want to only construct an option if the "Active" key is true. Is there a way for me to do this in the psuedo-JavasScript inside of the Angular directive?
Try ng-options="item.Name for item in filters | filter:{ Active : true }".