Javascript 构建angularjs视图使用的文本值数组_Javascript_Jquery_Angularjs

Javascript 构建angularjs视图使用的文本值数组

javascript jquery angularjs

Javascript 构建angularjs视图使用的文本值数组,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,在这个plnkr中，我试图以编程方式构建一个文本值数组，并在角度js视图中显示它们：但是没有显示这些值。我认为问题在于此代码： var vp = []; vp.push("Blue: true"); 这是构建阵列的正确方法吗？这不应该在json上正确序列化，以便angularjs可以正确显示值吗如果我改变： var vp = []; vp.push("Blue: true"); 到它工作正常 plnkr来源： <!doctype html> <html ng-app

在这个plnkr中，我试图以编程方式构建一个文本值数组，并在角度js视图中显示它们：

但是没有显示这些值。我认为问题在于此代码：

var vp = [];
vp.push("Blue: true");

这是构建阵列的正确方法吗？这不应该在json上正确序列化，以便angularjs可以正确显示值吗

如果我改变：

var vp = [];
vp.push("Blue: true");

到

它工作正常

plnkr来源：

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Multiple Checkboxes</title>
  <style>
    label {display: block;}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
</head>

<body>
  <div ng:controller="MainCtrl">
    <label ng-repeat="(color,enabled) in colors">
        <input type="checkbox" ng-model="colors[color]"> {{color}} 
    </label>
    <p>colors: {{colors}}</p>

  <script>
    var app = angular.module('plunker', []);

    var vp = [];
    vp.push("Blue: true");

    app.controller('MainCtrl', function($scope){
        $scope.colors = vp;
    });
  </script>
</body>
</html>


AngularJS多个复选框
标签{显示：块；}
{{color}}
颜色：{{colors}}
var app=angular.module（'plunker'，[]）；
var-vp=[]；
推送副总裁（“蓝色：正确”）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.colors=vp；
});

接受答案的来源：

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Multiple Checkboxes</title>
  <style>
    label {display: block;}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
</head>

<body>
  <div ng:controller="MainCtrl">
<label ng-repeat="color in colors">
    <input type="checkbox" ng-model="color.enabled"> {{color.name}} 
</label>
    <p>colors: {{colors}}</p>

  <script>
    var app = angular.module('plunker', []);

    var vp = [];
    vp.push({name:'Blue', enabled:true});
    vp.push({name:'Black', enabled:true});


    app.controller('MainCtrl', function($scope){
        $scope.colors = vp;
    });
  </script>
</body>
</html>


AngularJS多个复选框
标签{显示：块；}
{{color.name}
颜色：{{colors}}
var app=angular.module（'plunker'，[]）；
var-vp=[]；
推送（{name:'Blue'，enabled:true}）；
推送（{name:'Black'，enabled:true}）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.colors=vp；
});

您只需在此处向数组中添加一个字符串：

var vp = [];
vp.push("Blue: true");

通常，您绑定到对象文本，这些文本遵循

{property:x，property:b}

语法：

var vp = [];
vp.push( { Blue: true, NestedObject: { Color: 'Red'} });

这里有一种替代方法，将对象添加到索引数组中，而不是将布尔值添加到关联数组中

Javascript:

var vp = [];
vp.push({name:'Blue', enabled:true});

HTML:

<label ng-repeat="color in colors">
    <input type="checkbox" ng-model="color.enabled"> {{color.name}} 
</label>


{{color.name}

<label ng-repeat="color in colors">
    <input type="checkbox" ng-model="color.enabled"> {{color.name}} 
</label>