Fatal编程技术网
  • javascript/
  • Javascript 如何在动态添加的数组中具有不同的值

Javascript 如何在动态添加的数组中具有不同的值

javascript arrays angularjs

Javascript 如何在动态添加的数组中具有不同的值,javascript,arrays,angularjs,dynamic-arrays,Javascript,Arrays,Angularjs,Dynamic Arrays,我有一个表单，我正在通过该表单添加一些字段，如姓名、年龄、性别 <html> <body> <form> <input type="text" ng-model="name"> <input type="text" ng-model="age"> <input type="text" ng-model="sex"> <input type="button" value="add" n

我有一个表单，我正在通过该表单添加一些字段，如姓名、年龄、性别

<html>
<body>
  <form>
    <input type="text" ng-model="name">
    <input type="text" ng-model="age">
    <input type="text" ng-model="sex">
    <input type="button" value="add" ng-click="addToArray()">
  </form>
  <div ng-repeat="item in formdata">
    <input type="text" ng-model="item.name">
    <input type="text" ng-model="item.age">
    <input type="text" ng-model="item.sex">
  </div>
</body>
</html>
现在的问题是，当我将对象添加到
formdata
数组中并用
ng repeat
显示它时，它会为每个对象显示相同的数据

例如：

如果我输入
“John”，23，“Male”和
“Medona”，34，“Female”

它显示了两次
“Medona”，34，“女性”


我希望每个对象具有不同的属性值。
将
var formdata
更新为
$scope.formdata
：


$scope.formdata = [];

$scope.addToArray = function() {
  var temp = {
    name: $scope.name,
    age: $scope.age,
    sex: $scope.sex
  }
  $scope.formdata.push(temp);
}



将
var formdata
更新为
$scope.formdata
：


$scope.formdata = [];

$scope.addToArray = function() {
  var temp = {
    name: $scope.name,
    age: $scope.age,
    sex: $scope.sex
  }
  $scope.formdata.push(temp);
}



您应该在控制器中使用$scope，如下所示


app.controller('ExampleCtrl',function($scope){
    $scope.formdata=[];

    $scope.addToArray=function(){
        var temp={
            name:$scope.name,
            age:$scope.age,
            sex:$scope.sex
        }
        $scope.formdata.push(temp);
    };
});


或者，您可以使用“this”和控制器或别名


    <html>
        <body ng-controller="ExampleCtrl as ctrl">
            <form>
                <input type="text" ng-model="name">
                <input type="text" ng-model="age">
                <input type="text" ng-model="sex">
                <input type="button" value="add" ng-click="ctrl.addToArray()">
            </form>
           <div ng-repeat="item in formdata">
               <input type="text" ng-model="item.name">
               <input type="text" ng-model="item.age">
               <input type="text" ng-model="item.sex">
           </div>
        </body>
    </html>


app.controller('ExampleCtrl',function(){
    var self = this;
    self.formdata=[];

    self.addToArray=function(){
        var temp={
            name:Petter,
            age:25,
            sex:'Male'
        }
        self.formdata.push(temp);
    };
});




app.controller（'ExampleCtrl'，function（）{
var self=这个；
self.formdata=[]；
self.addToArray=函数（）{
变温={
姓名：彼特，
年龄:25岁，
性别：'男'
}
自身表单数据推送（温度）；
};
});



以下是您应该在控制器中使用$scope的方法


app.controller('ExampleCtrl',function($scope){
    $scope.formdata=[];

    $scope.addToArray=function(){
        var temp={
            name:$scope.name,
            age:$scope.age,
            sex:$scope.sex
        }
        $scope.formdata.push(temp);
    };
});


或者，您可以使用“this”和控制器或别名


    <html>
        <body ng-controller="ExampleCtrl as ctrl">
            <form>
                <input type="text" ng-model="name">
                <input type="text" ng-model="age">
                <input type="text" ng-model="sex">
                <input type="button" value="add" ng-click="ctrl.addToArray()">
            </form>
           <div ng-repeat="item in formdata">
               <input type="text" ng-model="item.name">
               <input type="text" ng-model="item.age">
               <input type="text" ng-model="item.sex">
           </div>
        </body>
    </html>


app.controller('ExampleCtrl',function(){
    var self = this;
    self.formdata=[];

    self.addToArray=function(){
        var temp={
            name:Petter,
            age:25,
            sex:'Male'
        }
        self.formdata.push(temp);
    };
});




app.controller（'ExampleCtrl'，function（）{
var self=这个；
self.formdata=[]；
self.addToArray=函数（）{
变温={
姓名：彼特，
年龄:25岁，
性别：'男'
}
自身表单数据推送（温度）；
};
});



以下是
var formdata=[]；应为$scope.formdata=[]；尝试使用
$scope.formdata=[]如果将formdata附加到作用域工作fiddle，它就会工作：如何将控制器映射到html？var formdata=[]；应为$scope.formdata=[]；尝试使用
$scope.formdata=[]如果将formdata附加到作用域工作fiddle，它会起作用：如何将控制器映射到html？但背后的原因是什么？为什么会这样？你是说“this”和“$scope”？如果是这样，你的问题有很好的答案，但背后的原因是什么？为什么会这样？你是说“this”和“$scope”？如果是这样的话，你的问题有一个很好的答案