Azerty Azerty Azerty Azerty - 1 month ago 7
AngularJS Question

Angularjs scope error

need some help on angular i have no knowledge on, but i have a work to do ^^' . My problem is when i write into my inputs i can't get the ng-model return and get a scope error telling

$scope.newemployee is undefined
(corrected).
New problem my table 'List' stay empty like my object employee

<!DOCTYPE html>

<html ng-app="employe">
<head>

<meta charset="utf-8" />
<title>
List of employe
</title>
<meta name="viewport" content="with=device-width , initial-scale=0 ,shrink- to-fit=no" />
<link rel="stylesheet" href="./files/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="./files/style.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js" type="text/javascript">
</script>
<script type="text/javascript" src="./files/code.js">
</script>
</head>

<body>
<div ng-controller="FormController as FormCtrl">
<button ng-click="FormCtrl.setShow(2)">Add new employee</button>
<form class="form-horizontal" ng-controller="ListCtrl" name="infoForm" ng-submit="addEmployee()" ng-show="FormCtrl.isShow(2)" novalidate="" id="infoForm">
{{newemployee}}
<h2>
Add/Edit employee
</h2><!-- NOM -->
<div class="form-group">
<label for="name" class="col-xs-5 control-label">Name</label>
<div class="col-xs-2">
<input type="texte" ng-model:"newemployee.name" class="form-control" ng-required="true" name="name" />
</div>
</div><!-- AGE -->
<div class="form-group">
<label for="age" class="col-xs-5 control-label">Age</label>
<div class="col-xs-2">
<input type="number" ng-model:"newemployee.age" class="form-control" ng-required="true" />
</div>
</div><!-- NICKNAME -->
<div class="form-group">
<label for="nickname" class="col-xs-5 control-label">Nickname</label>
<div class="col-xs-2">
<input type="texte" ng-model:"newemployee.nickname" class="form-control" ng-required="true" />
</div>
</div><!-- EMPLOYEE -->
<div class="form-group">
<label for="employee" class="col-xs-5 control-label">Employee</label>
<div class="col-xs-2">
<label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="Yes" ng-model:"newemployee.yes" value="yes" />Yes</label> <label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="No" ng-model:"newemployee.no" value="no" />No</label>
</div>
</div><!-- JOB -->
<div class="form-group">
<label for="job" class="col-xs-5 control-label">Job</label>
<div class="col-xs-2">
<select ng-model:"newemployee.job" class="form-control">
<option>
Founder
</option>
<option>
Market chef
</option>
<option>
Stage
</option>
</select>
</div>
</div><!-- ANNEE -->
<div class="form-group">
<label for="years" class="col-xs-5 control-label">Years</label>
<div class="col-xs-2">
<input type="number" ng-model:"newemployee.years" class="form-control" ng-required="true" />
</div>
</div><!-- BUTTON -->
<div class="center">
<button type="submit" class="btn btn-default btn-success">Validate</button> <button class="btn btn-default btn-warning" ng-click="FormCtrl.setShow(1)">Cancel</button>
</div>
</form>
</div>

</body>




Here angularjs code



(function () {
var app = angular.module('employe', []);

app.controller("FormController", function () {
this.Edit = 1;

this.isShow = function(checkEdit){
return this.Edit == checkEdit;
};

this.setShow = function(setShow){
return this.Edit = setShow ;

};
console.log(this.Edit);

});

app.controller("ListCtrl", ['$scope', function($scope) {
$scope.list = /*employee*/[];

$scope.addEmployee = function(){
$scope.list.push({
name: $scope.newemployee.name,
age : parseInt($scope.newemployee.age),
nickname : $scope.newemployee.nickname,
job : $scope.newemployee.job ,
years : parseInt($scope.newemployee.years),
salarie : $scope.newemployee.yes + $scope.newemployee.no

});

};


}]);



})();

Answer

You should probably initialize the newemployee object inside ListCtrl as follows

app.controller("ListCtrl", ['$scope', function($scope) {
    $scope.list = /*employee*/ [];
    $scope.newemployee = {};
    $scope.addEmployee = function() {
        $scope.list.push({
            name: $scope.newemployee.name,
            age: parseInt($scope.newemployee.age),
            nickname: $scope.newemployee.nickname,
            job: $scope.newemployee.job,
            years: parseInt($scope.newemployee.years),
            salarie: $scope.newemployee.yes + $scope.newemployee.no

        });
    };
}]);

Sample input tag

<input type="text" class="form-control" ng-required="true" name="name" ng-model="newemployee.name" />
Comments