AngularJS更改单个范围项

时间:2014-07-18 09:29:13

标签: javascript angularjs

有点难以解释, 我们已经完成了这个样本

https://egghead.io/lessons/angularjs-understanding-isolate-scope

但它与我们想要达到的目标并不完全相符。

我们已经构建了一个只需设置myData的控制器

  ClinicalNotesCtrl.controller('notesController', function notesController($scope, $http, $modal, $log) {

    $scope.myData = { name: "Moroni", age: 50, result: "Sodium" };

    $scope.changename = function (h) {
        h.name = "Simon";
        h.age = "34";
        h.result = "This is a test";

    }

    });

以下是名为kid的指令。这只是打印出值

  Results.directive("kid", function () {
    return {
        restrict: "E",
         // scope: { myValue: '=simon' },
       // scope:{},
        template: '<input type="text" ng-model="myData.name">{{myData.name}}' // '<div>{{$scope.timelineactivitydata}}</div>',

    };
    });

最后这是HTML页面,

  <kid simon="myData"></kid>
        <label ng-click="changename(myData)">Change Name</label>
<kid simon="myData"></kid>
        <label ng-click="changename(myData)">Change Name</label>
<kid simon="myData"></kid>
        <label ng-click="changename(myData)">Change Name</label>

我们想要实现的是以某种方式将特定标签与kid指令相关联,这样当点击标签时,只有相关的孩子会更改其名称,而不是所有名称。

希望有道理,

根据评论的要求, 请看看plunker: -

plnkr.co/edit/3NMBNTrLT29EIFNo9lbA?p=preview

1 个答案:

答案 0 :(得分:0)

我在这里发布解决方案,但我不确定它是否能为您解决任何问题。

JS代码

var myApp = angular.module(&#39; myApp&#39;,[]);

myApp.controller(&#39; notesController&#39;,函数notesController($ scope,$ http){

$scope.myData = [{ name: "Moroni", age: 50, result: "Sodium" },
                 { name: "Naomi", age: 50, result: "Sodium" },
                 { name: "Rambo", age: 50, result: "Sodium" }
];

$scope.changename = function (h) {
    h.name = "Simon";
    h.age = "34";
    h.result = "This is a test";
};

})
.directive("kid", function () {
return {
    restrict: "E",
    scope:{
        myData:"=simon",
        changed:"&change"
    },
    template: '<input type="text" ng-model="myData.name"/><span>'
                +'{{myData.name}}</span><label ' 
                +'ng-click="changed({\'data\':myData});">'
                +'Change Name</label><br/>'
};
});

HTML

<div ng-app="myApp" >
    <div ng-controller="notesController" >
         <kid ng-repeat="data in myData" simon="data" change="changename(data)">
         </kid>
    </div>
</div>