access ng-model select control inside ng-include - angularjs

I have a created a angularjs application. In the Thread.html page, I am having the combobox to load the strategy list.
<select class="txtBox" data-ng-model="editor.strategy">
<option value="">--Selected Strategy--</option>
<option data-ng-repeat="s in strategyList" value="{{ s.Name }}">{{ s.Name }}</option>
</select>
I am include the template using ng-include in the same page.
<div data-ng-include="'/views/Editor.html'"></div>
Inside the editor.js controller, I am able to access the $scope.editor.strategy for the first time. After post the data, I am trying to clear the combobox by seeting $scope.editor = {"strategy":''}. How to reset the combobox from the editor.js controller. I am not sure where I am doing mistake. Kindly help.

You'll have to post more of your editor.js code, so we can see how you are populating strategyList. Since you are using ng-repeat (why not use ng-options?), you'll have to reset strategyList, not editor.strategy.

Related

AngularJS - Extra blank option added when i use ng-repeat in select tag

I am facing some issue on select tab when using in ng-repeat.
On Stackoverflow i found many solution related to my broblem but i am not able to solve my broblem.
Here is my code..
on the top of page i define my controler
<ion-view view-title="Product" ng-controller="productCtrl as pd">
and on controller
self.pdata = response;
On html page my code is..
<div ng-if="pd.pdata.optionid.length > 0" class="prodetail" ng-repeat="x in pd.pdata.optionid">
<h5>{{x.title}}</h5>
<select name="{{x.title}}" ng-model="pd[x.title]" style="right:5px;">
<option ng-repeat="y in pd.pdata.optionvalue[x.option_id]" value="{{y.value_id}}" selected>{{y.title | uppercase}}</option>
</select>
</div>
here my select tab is in ng-repeat loop
so that every time my ng-model is define dynamically.
My Problem is:-extra blank option added using ng-repeat in select tag
modify your select tag like this, it's a bit mouthful but works alternatively you can also keep your option tag and remove ng-options from my select tag.
<select ng-init="pd[x.title] = pd[x.title] || pd.pdata.optionvalue[x.option_id][0].value_id" name="{{x.title}}" ng-model="pd[x.title]" style="right:5px;" ng-options="y.value_id as y.title.toUpperCase() for y in pd.pdata.optionvalue[x.option_id]">
</select>
here is a jsFiddle
Initially problem seems to be here
value="{{y.value_id}}"
see more here The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options
use a hard coded empty value
<option value="" ng-if="false"></option>

Bootstrap select combobox and ngRepeat options not working

I am trying to show tags in a Bootstrap select combobox. However, ng-repeat is not populating the options. After some research, I believe I need to write a directive for this, because Bootstrap takes the options and makes a list out of them before Angular adds the options. But I don't know what writing a directive involves.
<select class="combobox form-control" ng-model = "tags.repeatSelect">
<option ng-repeat = "tag in tags.tagNames" value = "{{tag.string}}"> {{tag.string}} </option>
This may solve your problem.
<select data-ng-model="modelValue" class="form-control" data-ng-options="item.string for item in tags.tagNames">
</select>

Empty Option field in Select tag - Angular js

I am getting empty Option field in select tag.
My code is shown below:
openSelectBoxModel="47"
openSelectList=[{id:""47",name:"text"}];
valuekey="id";
titlekey="name";
<select id="reportOpenSelectBoxSingle" size="6" ng-style='selectStyle' class="openSelectBox" ng-model="openSelectBoxModel" ng-change="changeFn()" >
<option ng-selected="openSelectBoxModel===item[valueKey]" ng-repeat="item in openSelectList" id="" ng-value="{{item[valueKey]}}" ng-title="{{item[titleKey]}}" ng-bind="item[titleKey]"></option>
</select>
Please help me to solve this problem.
You should not use ng-selected with ng-model.
The thing to do is to bind the selected item to your ng-model before displaying it.
//Also, instead of ng-repeat, you should use ng-option
As far as performance is regarded : ng-options does not create child scopes for every iteration. When angular performs its digest, your ng-repeat will slow it. If you have a list with hundreds of elements, you will feel a difference.
<select id="reportOpenSelectBoxSingle"
size="6"
ng-style='selectStyle'
class="openSelectBox"
ng-model="openSelectBoxModel"
ng-change="changeFn()" >
<option ng-repeat="item in openSelectList"
value="{{item[valueKey]}}"
title="{{item[titleKey]}}"
ng-bind="item[titleKey]">
</option>
</select>
Furthermore, you need to declare your variables inside a controller :
$scope.openSelectBoxModel="47";
$scope.openSelectList=[{id:"47",name:"text"}];
$scope.valuekey="id";
$scope.titlekey="name";

Loading angular view dynamically based on selection from dropdown

The following is something that I'd like to accomplish with Angular but I'm not sure if it's even possible.
My form would be comprised of 3 views/templates each with it's own controller. Two views are fixed, the third view needs to by dynamically loaded based on a value selected from a dropdown in one of the fixed views. The view and controller name would be derived based on the selected value. If possible I'd like to dynamically load the javascript for the controller of the selected view as well.
I heard some rumblings about this possibly in Angular 2.0 but I'm not exactly sure how to approach it.
Any thoughts? I'm not stuck with Angular so if another framework would work better in this case please let me know.
Unless you are talking about ng-route and $routeProvider, you can have it with ng-include.
By setting ng-include as dynamic, your html will be downloaded and replace the section.
NOTE: however, ng-include does not allow to have script tag in it.
You need to go around using your own directive.
This is the example of using ng-include,
http://plnkr.co/edit/nlGVNfSpJOjIfIXxpEKc?p=preview
<body ng-app ng-init="dynamic='1.html'">
<select ng-model="dynamic">
<option value="1.html">dynamic 1</option>
<option value="2.html">dynamic 2</option>
<option value="3.html">dynamic 3</option>
</select>
dynamic: {{dynamic}}
<div>Fixed 1</div>
<div>Fixed 2</div>
<div ng-include="dynamic"></div>
</body>

How bydefault select an Item in - ng-repeat on options through use of model

I am using ng-repeat on option in select.
<select ng-model="mymodel">
<option ng-repeat="p in persons" value="{{p.id}}">{{p.name}}</option>
</select>
$scope.persons= [
{id:1,name:"tester11"},
{id:2,name:'tester22'},
{id:3,name:'tester33'},
{id:4,name:'tester44'}
];
How can I make an option selectable means by default "tester33" should be selected
through use of ng-model.
I know it is achievable through ng-options. But I want to try this one.
Thanks in advance.
There is no perfect way to achieve this using ng-repeat, but here's a workaround:
<select ng-model="mymodel">
<option ng-repeat="p in persons" ng-selected="p.name=='tester33'" value="{{p.id}}">{{p.name}}</option>
</select>
This just sets the option with name='tester33' but the model won't get updated until the user changes select value explicitly
NOTE: This is not a recommended way, you must use ng-options for complete functionality

Resources