ng-model from radio button is always undifined

Question

When I am fire ng-click event, ng-model is always undefined. I want to get the selected value. The alias name works well.

<div ng-if="post.direction != 'digital_in' && post.direction != 'digital_out'">
    <label><input data-ng-model="dir" type="radio" name="direction" value="digital_in">digital input</label>
    <label><input data-ng-model="dir" type="radio" name="direction" value="digital_out">digital output</label>
    {{dir}}
 </div>

<td><button type="submit" class="btn btn-warning" ng-click="updatePin(post, alias, direction.value())"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button></td>

This it the controller:

$scope.updatePin = function(post, alias, dir){
    console.log(post.id);

    post.alias = "" + alias;
    post.direction = "" + dir;
    $http.post('http://localhost:9000/activePinsUpdate?id=' + post.id , post).success(function(data, status) {
        $scope.loadData();
    });
};

Answer 1

use ngValue with ng-model as object property

Like this

<div ng-if="post.direction != 'digital_in' && post.direction != 'digital_out'">
    <label><input data-ng-model="post.dir" type="radio" name="direction" ng-value="digital_in">digital input</label>
    <label><input data-ng-model="post.dir" type="radio" name="direction" ng-value="digital_out">digital output</label>
    {{dir}}
 </div>

you can access this in your ctrl like this

post.alias = "" + alias;
post.direction = "" + post.dir;

Answer 2

ng-if directive does create a child scope which is prototypically inherited from parent scope.

On contrast Prototypal Inheritance means?

If you have scope hierarchy, then parent scope property are accessible inside child scope, only if those property are object (originally object referenced is passed to child scope without creating its new reference). But primitive datatypes are not accessible inside child scope and if you looked at your code addCustom scope variable is of primitive dataType.

Problem is dir variable with radio ng-model which you are using inside ng-if is of primitive data-type. So when ng-if renders div it does create a child scope there which has again have dir value. So controller dir variable is different than ng-if's radio button dir scope variable.

For solving the issue you need to change from

data-ng-model="dir"

to

data-ng-model="post.dir"

So that Prototypal inheritance rule will get followed using DOT rule.

And from post object only you can get the value post.dir button, no need to pass it explicit value of dir then. I'm not going to explain what exactly happening behind the scene, as you can refer this similar answer here which has other way to get this thing done.

Answer 3

You may Need to Share Your Code in a Fiddle thats a Good and Quick way to Get Help ..

Suggestion :- You may Need to use Pre-Angular Binded UI - Angular ui http://angular-ui.github.io/bootstrap/versioned-docs/0.12.0/#/getting_started If you are a Starter Try to Start with the Above Links Because these are Already Binded with angularjs. so You will not Face Above Kind of Problems.

You are Using Pure Html to Bind with angular Which Creates Chaos . Finally Understands for angular UI.

Solution :- Missing thing is ng-value .

<div ng-if="post.direction != 'digital_in' && post.direction != 'digital_out'">
    <label><input data-ng-model="dir" type="radio" name="direction" ng-value="digital_in" ng-checked='true'>digital input</label>
    <label><input data-ng-model="dir" type="radio" name="direction" ng-value="digital_out">digital output</label>
    {{dir}}
 </div>

if it is Still Not working

Pre-define $scope.dir='digital_in'; // it updates on selecting radio.

$scope.updatePin = function(post, alias, dir){
    console.log(post.id);
    post.alias = "" + alias;
    post.direction = "" + $scope.dir;   //value Updates on Check 

    $http.post('http://localhost:9000/activePinsUpdate?id=' + post.id , post).success(function(data, status) {
        $scope.loadData();
    });
};

Good Luck !!