Angular.js values not being saved in the scope from textbox

Question

I have this html markup:

<div data-ng-controller="VehicleProfileController">

<modal title="Add Vehicle Info" visible="showVehicleInfo">
    <div class="container">
        <div class="col-xs-4">
            <div class="row">
                Title <input type="text" ng-model="NewVMPTitle" class="form-control"/>
                Miles <input type="text" ng-model="NewVMPMiles" class="form-control"/>
            </div>
            <div class="row">
                <button ng-click="addVehicleData()" class="btn btn-success pull-right">Save</button>
            </div>
        </div>
    </div>
</modal>

</div>

Then in the controller I have this:

$scope.addVehicleData = function () {
            alert($scope.NewVMPTitle + ' ' + $scope.NewVMPMiles);
        };

Both NEWVMPTitle and NewVPMMiles are empty, am I missing something?

this works correctly http://plnkr.co/edit/QlDoYxyJaBODBsq2VVLC?p=preview. Perhaps there is something else in some code you aren't showing here? For what it is worth, using primitives with `ng-model` isn't really a good idea, you should be using objects whenever possible to avoid scope inheritance issues. see http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs — Claies, Dec 07 '15 at 16:51
Can you give any more info on what `modal` is? Maybe the ng-models are being bound to a child scope relative to that used for `addVehicleData` — Tom Makin, Dec 07 '15 at 16:52
modal is directive for showing bootstrap modal popups @shakinfree — Laziale, Dec 07 '15 at 16:56
I've never seen it done with an element before. Is that your own directive? If so how are you managing the scope? — Tom Makin, Dec 07 '15 at 17:01
Are you getting any angular errors? Or is the value just not being assigned? I would try wrapping your ng-model's in double curlys. It would be nice to see the whole controller. — James, Dec 07 '15 at 17:08

score 3 · Accepted Answer · answered Dec 07 '15 at 17:05

I think it is better to parsing parameter with ng-model to controller instead of using scope to catch a value from ng-model

Title <input type="text" ng-model="item.title" class="form-control"/>
Miles <input type="text" ng-model="item.miles" class="form-control"/>

<button ng-click="addVehicleData(item)" class="btn btn-success pull-right">Save</button>

and this is for the js

$scope.addVehicleData = function (item) {
    alert(item.title + ' ' + item.miles);
};

Angular.js values not being saved in the scope from textbox

1 Answers1