なぜng-model = $ scope.modelが定義されていないのですか？

Question

誰かが私を案内できますか？ $scope.nameStaffをng-repeatに入れると、その値はundefinedになります。私はなぜ値がundefinedであるのか分からない。

これは私のコードです：

<div ng-controller="MyCtrl"> 
<div ng-repeat="form in form"> 
<input type="text" ng-model="nameStaff" /> 
<input type="text" ng-model="idStaff" /> 
<button ng-click=addDetail()>add 
</button>1 
</div> 
{{form}} 
</div> 



var myApp = angular.module('myApp', []); 

function MyCtrl($scope) { 
    $scope.form = [{ 
    companyName: "company1", 
    companyAddress: "company address", 
    staff: [{ 
     name: "men", 
     id: "123" 
    }] 
    }, { 
    companyName: "company1", 
    companyAddress: "company address", 
    staff: [{ 
     name: "men", 
     id: "123" 
    }] 
    }] 
    $scope.addDetail = function() { 
    alert($scope.nameStaff); 
    $scope.form[0].staff.push({ 
     name: $scope.nameStaff, 
     id: $scope.idStaff 
    }); 
    } 
} 

Answer 1

これは、あなたが（私はあなたがこれをしたいと思う理由はわかりません、が）何をしたいです：

<!-- don't refer to children with the same name as parents --> 
<div ng-repeat="f in form"> 
    Staff Name: 
    <input type="text" ng-model="f.staff.name" /> <br /> 
    Staff Id: 
    <input type="text" ng-model="f.staff.id" /> 
    <button type="button" ng-click="addStaff(f.staff)" /> 
</div> 

Javascriptを：

$scope.addStaff = function(staff) { 
    var staffName = staff.name; 
    var staffId = staff.id; 
} 

Answer 2

var myApp = angular.module('myApp', []); 
 

 
function MyCtrl($scope) { 
 
    $scope.form = [{ 
 
     companyName: "company1", 
 
     companyAddress: "company address", 
 
     staff: [{ 
 
      name: "men", 
 
      id: "123" 
 
     }] 
 
    }, { 
 
     companyName: "company1", 
 
     companyAddress: "company address", 
 
     staff: [{ 
 
      name: "men", 
 
      id: "123" 
 
     }] 
 
    }] 
 
    $scope.addDetail = function() { 
 
     alert($scope.nameStaff); 
 
     $scope.form[0].staff.push({ 
 
      name: $scope.nameStaff, 
 
      id: $scope.idStaff 
 
     }); 
 
    } 
 
} 
 

 
myApp.controller('MyCtrl', MyCtrl);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <div ng-repeat="f in form"> 
 
     <input type="text" ng-model="$parent.nameStaff" /> 
 
     <input type="text" ng-model="$parent.idStaff" /> 
 
     <button ng-click=addDetail()>add 
 
     </button> 
 
    </div> 
 
    {{form}} 
 
</div>

「$ parent.nameStaff」を使用できます。