I have a character which can contain multiple skills.
Skills are available from an injected service.
What I basically want is this:
<div ng-repeat="skill in character.getSkills()">
<select ng-model="skill" ng-options="select as s.toString() for s in getAllSkills()"></select>
<button ng-click="character.removeSkill(skill)" >Remove Skill</button>
</div>
With this code, the select box doesn't work as I would expect it. Skills are not set in the character, and selections are not kept in the drop down.
Am I missing something?
Thanks in advance,
roemer
After all, I'm referencing the skill in the character.skills array by the $index property in the child scope:
<select ng-model="character.skills[$index]" ng-options="sk as sk.toString() for sk in getAllSkills()"></select>
Related
To begin with, I am an absolute beginner in front-end development, thus please excuse me if the question is too elementary.
The project I am working on, a drop-down list has been defined as:
<div ng-controller="FacetController">
<div class="spnlocationdrop-container" ng-hide="isservicelocal">
<select class="spnlocationdrop" ng-model="$parent.locationsearch" ng-options="location for location in locations | sortArray ">
<option value="">All Cities</option>
</select>
</div>
</div>
The list contains cities, out-of which the user has to select one. The value has to be stored, and sent to the backend via an AJAX call.
How do I get the selected value? Until now, I've been doing that using the document.getElementByID().value() function, but since the above list contains no ID, how do I get the value?
ng-model will have the value of the option selected.
Here's a simple working example: Plunker
In my example, data.singleSelect has the value you need so I'm able to output that to the view using {{ data.singleSelect }} though if I wanted to access it in my controller I would do var input = $scope.data.singleSelect and then pass that input variable to the backend via an AJAX call.
I am using this Angular Module but I can not get the work with nested data.
Here is my PLUNKR my output shows country when using object-property="country but when I try to show only states, it doesn't work.
<div class="mrg-top50">
<label>1. Autocomplete field - options list as array of objects</label>
<multiple-autocomplete ng-model="skills" object-property="country" suggestions-arr="skillsList"></multiple-autocomplete>
<label>Selected Model Value : <br />
</label>
{{skills}}
</div>
I could do it in your fiddle like this:
<multiple-autocomplete ng-model="skills" object-property="labels" suggestions-arr="skillsList[0].states"></multiple-autocomplete>
Though this is really dependent on the [0] index , which means only useful when you have just one element in the given array like in the given example.
I am trying to build a search box autocomplete using Angular Bootstrap. When I start typing in the input fields, i would like the autosuggest output(html) to be something like this:
Categories
art
science
math
Courses
algebra
biology
painting
The results are split into parts - categories and courses based on two arrays. This is what i have for the angular controller
$scope.courseSearchList = $http.get('api/courses', {cache: false});
$scope.categorySearchList = $http.get('api/categories', {'cache': false});
$q.all([$scope.categorySearchList, $scope.courseSearchList]).then(function(values) {
var a = values[0].data;
var b = values[1].data;
var c = [];
c.push(a);
c.push(b);
console.log(c[0], 'categories');
console.log(c[1], 'courses');
$scope.searchResults = c;
});
so scope.searchResults will have two arrays inside [[obj],[obj]]. The first array contains all the categories' titles and the second array contains all the courses' titles. The scope is called by the input field, here it is below
<div class="custom-typehead">
<input type="text" ng-model="selected" placeholder="search a course"
uib-typeahead="items.title for items in searchResults | filter:$viewValue:startsWith" typeahead-template-url="searchResults.html"
typeahead-on-select="onSelect($item, $model, $label)" typeahead-min-length="1" class="form-control" ng-init="">
</div>
<script type="text/ng-template" id="searchResults.html">
<div>
<div>
courses
{{match.model[0].title}}
</div>
<div">
categories
{{match.model[1].title }}
</div>
</div>
</script>
I know the script and the input are wrong, but I'm still trying to find a way to split the results in two parts like the desired output above; or maybe you can offer a better solutions to this problem. Can anyone help me with this problem? Brand new to Angular and still learning this cool framework.
Your help will be much appreciated. Thanks in advance!
Looks like you are working in angular-bootstrap framework. If it is then this link may help you.
You can use md - autocomplete material angle this is link https://material.angularjs.org/latest/demo/autocomplete
I hope to be of assistance.
I am attempting to generate a form like this:
<div class="col-xs-6" for.repeat="field in ${config.formMain}">
<div class="form-group">
<label>${field.label & oneTime}</label>
<select if.one-time="field.controlType == 'select'" class="form-control">
<option value=""><- Select -></option>
</select>
</div>
</div>
where config is a variable in my view-model.
A couple questions:
1) I have tried both for.repeat="field in ${config.formMain}" and for.repeat="field in config.formMain" and neither syntax seems to work. How am I meant to access the array from the object?
2) Is there any support for something like for.repeat.one-time="field in ${config.formMain}" where this would cause Aurelia to only execute the loop compilation once (which is useful in my case because the form is not going to chage) but keep the bindings inside the loop as default bindings (i.e. if I have a for.repeat inside of the outer one, it should update itself if the array it is iterating over changes)?
Thanks in advance.
The correct syntax is: repeat.for="thing of things"
See that is of instead of in, following the ECMAScript 6 style. More information at https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/for...of
You could use "& oneTime" to execute the loop only once. Like this:
repeat.for="thing of things & oneTime"
A merchant has multiple branches.
When selecting a merchant I'm trying to make another dropdown list the data from merchant.branches.
Doing the below does not seem to be resolving the problem:
<label>Merchant:</label>
<select ng-if="merchants" ng-model="merchant" ng-options="merchant.name for merchant in merchants track by merchant.id"></select>
<span ng-if="!merchants">Listing merchants, please wait...</span>
<br />
<label>Branch:</label>
<select ng-if="merchant.branches" ng-model="device.branch" ng-options="branch.name for branch in merchant.branches track by branch.id"></select>
<span ng-if="!merchant.branches">Listing branches, please wait...</span>
<pre>
{{ merchant.branches }}
</pre>
Please note that the data is correct and Merchants return properly with their respective branches.
SOLVED
Using a different method (By calling ng-change on the first dropdown and then populating the second dropdown). However, is it possible to achieve this without writing any controller code?
I have to guess at how your controller works, but you might have luck with this:
<label>Branch:</label>
<select ng-if="merchant.branches"
ng-model="device.branch"
ng-options="branch.name for branch in merchants[merchant.id].branches track by branch.id"></select>