使用键和值进行ng-repeat,然后使用该键作为ng-model的指令值

时间:2014-08-11 13:34:26

标签: javascript html angularjs

可以在ng-model指令中使用范围变量的键吗?

我想要的不是手动为每个ng-model指令设置键,我只想使用ng-repeat并获取范围变量的关键字并将其放在ng-repeat内的ng-model中指示。

我只是这个框架的新手。任何帮助将不胜感激

标记摘录

<div ng-show="editing">
    <input ng-repeat="(key, value) in editing" ng-model="editing.key">
</div>  

HTML

<html ng-app>
<head>
    <title>Demo</title>
    <script type="text/javascript" src="js/lib/angular.min.js"></script>
    <script type="text/javascript" src="js/controllers/app.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
</head>
<body>
    <div classs="container" ng-controller="UserProfile">
        <ul>
            <li ng-repeat="user in users"><a href="" ng-click="editProfile(user.id)">{{user.id}} - {{user.fname}} </a></li>
        </ul>
        <div ng-show="editing">
            <input ng-repeat="(key, value) in editing" ng-model="editing.key">
        </div>  
    </div>
</body>
</html>

的Javascript

function UserProfile ($scope) {
  $scope.users = {
    "ID01": {
      "id": "ID01",
      "fname": "Vincent",
      "lname": "Panugaling",
      "gender": "male",
      "age": "21",
    },
    "ID02": {
      "id": "ID02",
      "fname": "Adrian",
      "lname": "Santos",
      "gender": "male",
      "age": "22"
    },
    "ID03": {
      "id": "ID03",
      "fname": "Incognito",
      "lname": "Mode",
      "gender": "female",
      "age": "21"
    }
  };

  $scope.editProfile = function (id) {
    $scope.editing = $scope.users[id];
  };
}

1 个答案:

答案 0 :(得分:1)

您期待这个视图请看一下,是的,可以使用键作为ng-model 嘿伙计你使用角度1.0.1版本,这就是为什么你可以编辑一次和焦点出来使用最新版本检查相同的演示

updated fiddle

html代码

<div classs="container" ng-app="app" ng-controller="UserProfile">
        <ul>
            <li ng-repeat="user in users"><a href="" ng-click="editProfile(user.id)">{{user.id}} - {{user.fname}} </a></li>
        </ul>
        <div ng-show="editing">
            <input ng-repeat="(key, value) in editing" ng-model="editing[key]">
        </div>  
    </div>

<强> angular.js

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

function UserProfile ($scope) {
  $scope.users = {
    "ID01": {
      "id": "ID01",
      "fname": "Vincent",
      "lname": "Panugaling",
      "gender": "male",
      "age": "21",
    },
    "ID02": {
      "id": "ID02",
      "fname": "Adrian",
      "lname": "Santos",
      "gender": "male",
      "age": "22"
    },
    "ID03": {
      "id": "ID03",
      "fname": "Incognito",
      "lname": "Mode",
      "gender": "female",
      "age": "21"
    }
  };

  $scope.editProfile = function (id) {
    $scope.editing = $scope.users[id];
  };
}