javascriptangularjsangularjs-directiveangularjs-scopeangularjs-model

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


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?


Solution

  • 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);
    };