I'm getting a problem with angular and I'm not understanding what the problem may be:
thats a div:
<div ng-controller="CountrySelectorController">
Selected Countryid = {{countryid}}
<div class="radio" ng-repeat="country in countries">
<input type="radio" name="countryOptions" ng-model="countryid" value={{country.countryid}} ng-checked="countryid == country.countryid" /><span style="margin-left:10px;">{{country.countryid}}.{{country.name}}</span>
</label>
</div>
</div>
thats my controller:
app.controller('CountrySelectorController', function($scope, $rootScope){
$scope.countryid = 1;
});
the problems I'm getting:
-Selected Countryid=1 appears at start . Although I'm selecting different countries, the model is not updating
ng-repeat creates its own scope, which is not what you want to bind the ng-model to. You want to bind ng-model to the controller's scope (which is the parent scope of the ng-repeat).
Use $parent to go up a level to the correct scope. Also, don't use ng-checked.
ng-model="$parent.countryid"
Demo
Related
I want to bind item to the view only once in my angulajs project.
Here is plunker.
Here the template html:
<div class="form-group">
<div class="col-xs-8">
<span ng-repeat="city in ma.cities" class="view" ng-if="city.Id == ma.selected">
{{::city.Name}}
</span>
<select class="form-control"
ng-model="ma.selected"
ng-options="city.Id as city.Name for city in ma.cities">
</select>
</div>
</div>
I want the city.Name to be bind to template html only once.
But the problem that when I change the item in select element the city.Name is also updated.
I try to use once bind operator :: but it didn't help.
How can I bind element to the view only once and to prevent update?
The value isn't changing. You're got an ng-if nested within an ng-repeat and when the city is changed which item is displayed changes.
If I'm following what you're trying to do, I would store the currently selected city to a property on the controller when the controller is created and display that property, eliminating the ng-repeat and the ng-if in the process.
I agree with Mike, the question is a bit ambiguous. I think what you're asking for is:
<span>{{::ma.cities[ma.selected].Name}}</span>
But then again, as Mike said, you could've achieved that with another scope variable, and it would be probably a much clearer solution.
As YOU adviced I modified html template:
<span ng-repeat="city in ::ma.cities" class="view" ng-if="::city.Id == ma.selectedId">
{{city.Name}}
</span>
Here is plunker.
I have one ng-controller nested in another controllers scope.
I want to set scope variable in nested controller scope, to parent controller.
I have view:
<div ng-controller="MyCtrl">
<input type="text" ng-model="name"/>
<div ng-controller="CountryDataController">
<angucomplete
(...)
selectedObject="country"/>
</div>
</div>
which is part of the form.
Then on form submit i want to send ng-models from MyCtrl ( name,country) doing:
fields: {name: $scope.name,
country: $scope.country,
},
How can i tell angular, that selectedObject model belongs to MyCtrl, and not CountryDataController.
I tried
selectedObject="MyCtrl.country"
selectedObject="country[MyCtrl]"
but without effects.
selectedObject in angucomplete works like ng-model.
Also I don't want to rewrite logic from CountryDataController to MyCtrl, because in first i have fields for autocomplete and in second file uploading.
Is there any convention for this?
The answer is:
selectedobject="$parent.country"
You can use $parent, but if you move your HTML or eventually add another controller it between it will break.
The correct way to do that is to use the controller as syntax, as shown below:
<!-- use topCtrl to access this controller scope -->
<div ng-controller="MyCtrl as topCtrl">
<input type="text" ng-model="name"/>
<!-- use countryCtrl to access this controller scope -->
<div ng-controller="CountryDataController as countryCtrl">
<angucomplete
(...)
selectedObject="topCtrl.country"/>
</div>
</div>
I got confused a bit about whether can we create multiple instance of controller and that to in nested form for eg -
<div ng-controller="abc">
<form ng-submit="call()">
<input type=text ng-model="content"/>
</form>
<div ng-controller = "abc">
<form ng-submit="call()">
<input type=text ng-model="content"/>
</form>
</div>
</div>
i just want to know that if i use the same model with other instance of controller, so model value would be same or different. Similar to static variable ?
i just want to know that if i use the same model with other instance
of controller, so model value would be same or different. Similar to
static variable ?
All declarations of ng-controller create a new instance of the controller. So, if you had two instances side by side, like this:
<div ng-controller="abc">
<input type=text ng-model="content"/>
</div>
<div ng-controller="abc">
<input type=text ng-model="content"/>
</div>
plunker
then, all of the $scope properties of each would be completely independent.
When a ng-controller is nested, then its scope inherits the parent controller's scope. So for this you'd expect that content refers to the same scope property:
<div ng-controller="abc">
<input type=text ng-model="content"/>
<div ng-controller="abc">
<input type=text ng-model="content"/>
</div>
</div>
plunker
However, since content is not defined directly in the controller something strange happens. If you fill in the parent input first. Both, inputs become bound to the same scope property. However, if you fill in the child input first, they are independent!
This can be confusing until you understand that Angular is being lazy when it creates the property on the scope. content is null at first on both scopes. It is only when it has a value that it will inherit.
So, what do you do if you want to keep things separate? Add an initial value to a $scope property inside the controller:
app.controller('abc', function($scope) {
$scope.content = '';
});
plunker
This way, each separate controller instance is initialized with its own content property.
Hope this helps.
I have created a button, that when it is clicked I want to get the text from a textarea. Here is the html.
<div class="text-area-container">
<textarea id="chatBox" class="chat-box" rows="2"></textarea>
</div>
<div class="button-container btn-group btn-group-chat">
<input id="comment" ng-click="chat($event)" class="btn" value="Comment"/>
</div>
And here is my controller
$scope.chat = function($event) {
var button = $event.currentTarget;
};
I get the button from the $event, but how do I get the textarea. I know that I can jQuery it, but that is not the Angular way. How do i do it without jQuery?
Add ng-model to text area, like:
<textarea id="chatBox" class="chat-box" rows="2" ng-model="textModel"></textarea>
In controller write $scope.textModel = "";
Demo Fiddle
Angular is two way data binding. Setting ng-model will chain textarea value with controller var.
On controller side:
$scope.textArea = "";
On view side:
<textarea [...] ng-model="textArea">[...]</textarea>
On your controller, $scope.textArea will always contain textarea content.
You're looking for ng-model.
<textarea ng-model="text" id="chatBox" class="chat-box" rows="2"></textarea>
access it with $scope.text in js or {{text}} in view.
Well if you need to know only text area's value I guess it should be binded to some $scope model variable via data-ng-model="MyTextValue":
<textarea id="chatBox" data-ng-model="MyTextValue" class="chat-box" rows="2">}</textarea>
so in $scope.chat function you can get access to $scope.MyTextValue.
You can also enable/disable or show/hide control via ng-* attibutes too. In most cases it is enough.
I am generating a bunch of radio buttons using ng-repeat, and then trying to update a model when one of them is selected. This doesn't appear to be working.
The same markup works just fine when the radio inputs are hardcoded as opposed to being generated by ng-repeat.
This works:
<input type="radio" ng-model="lunch" value="chicken" name="lunch">
<input type="radio" ng-model="lunch" value="beef" name="lunch">
<input type="radio" ng-model="lunch" value="fish" name="lunch">
{{lunch}}
This doesn't:
<input type="radio" ng-model="lunch" ng-repeat="m in meat" value="m" name="lunch">
{{lunch}}
See jsfiddle showing both here: http://jsfiddle.net/mark_up/A2qCS/1/
Any help would be appreciated.
Thanks
<div ng-controller="DynamicCtrl">
<input type="radio" ng-model="$parent.lunch" ng-repeat="m in meat"
ng-value="m" name="lunch">
{{lunch}}
</div>
Should do the trick.
As I understand it, ng-repeat creates its own $scope. so you need to refer to the $parent $scope; Yes, AngularJS is tricky. Also you need to change the value to ng-value too.
the above issue was discussed here
That happens because ng-repeat creates a new scope. Basically, each <input> is creating a selectedOption value on its own inner scope. To work around that, create a new container object for that value. For example, you could declare in your controller:
$scope.data = {selectedOption: x};
And then in your template, use ng-model="data.selectedOption"
in this way, ng-model gets updated .. :)
this is tricky
Just need to replace value with ng-value