Question

我试图将数据解析为ng-model，但我收到了错误。

HTML：

<div class="process-checkbox-holder" ng-repeat="time in data">
            <div class="checkbox-title">{{ time.id }}</div>
            <div class="process-checkbox">
                <input type="checkbox" ng-model="{{ time.model}}" value="None" id="process-checkbox" name="check">
                <label for="process-checkbox"></label>
            </div>
        </div>

数据：

$scope.data = [
            {"id":"00", "model": "user.hourzero"},
            {"id":"01", "model": "user.hourone"},
            {"id":"03", "model": "user.hourtwo"},
            {"id":"04","model": "user.hourthree"},
            {"id":"05", "model": "user.hourfour"},
            {"id":"06", "model": "user.hourfive"},
            {"id":"07", "model": "user.hoursix"},
            {"id":"08", "model": "user.hourseven"},
            {"id":"09", "model": "user.houreight"},
            {"id":"10", "model": "user.hournine"},
            {"id":"11", "model": "user.hourten"},
            {"id":"12", "model": "user.houreleven"},
            {"id":"13", "model": "user.hourthirteen"},
            {"id":"14", "model": "user.hourfourteen"},
            {"id":"15", "model": "user.hourfifteen"},
            {"id":"16", "model": "user.hoursixteen"},
            {"id":"17", "model": "user.hourseventeen"},
            {"id":"18", "model": "user.houreighteen"},
            {"id":"19", "model": "user.hournineteen"},
            {"id":"20", "model": "user.hourtwenty"},
            {"id":"21", "model": "user.hourtwentyone"},
            {"id":"22", "model": "user.hourtwentytwo"},
            {"id":"23", "model": "user.hourtwentythree"}

        ];

我收到此错误：

 Error: [$parse:syntax] Syntax Error: Token 'time.model' is unexpected, expecting [:] at column 5 of the expression [{{  time.model}}] starting at [time.model}}].
http://errors.angularjs.org/1.2.16/$parse/syntax?p0=time.model&p1=is%20unex…cting%20%5B%3A%5D&p2=5&p3=%7B%7B%20%20time.model%7D%7D&p4=time.model%7D%7D
    at angular.js:78
    at Parser.throwError (angular.js:10266)
    at Parser.consume (angular.js:10303)
    at Parser.object (angular.js:10616)
    at Parser.primary (angular.js:10234)
    at Parser.unary (angular.js:10492)
    at Parser.multiplicative (angular.js:10475)
    at Parser.additive (angular.js:10466)
    at Parser.relational (angular.js:10457)
    at Parser.equality (angular.js:10448)

有谁可以帮助我，我在这里做错了什么？是否无法将数据解析为ng-model？非常感谢

PLNKR

Answer 1

这是使用指令通过使用$compile

编译模板来解析模型字符串的一种方法

HTML

<div class="process-checkbox-holder" ng-repeat="time in data">
    <span class="checkbox-title">{{ time.id }}</span>
    <check-box model="time.model" user='user'></check-box>
  </div>

JS

app.directive('checkBox', function($compile){
    return {           
        restrict:'E',       
        scope:{model : '=', user:'='},
        link:function(scope,elem,attrs){             
           var template ='<input  type="checkbox" ng-model="'+scope.model+'">';
           elem.replaceWith($compile(template)(scope));
       }
    }
});

这需要使用隔离范围，因此您必须在控制器中声明user才能使其生效。如果您还需要添加验证，这可能不是最好的方法，但现在它涵盖了显示的内容。

我试着让它尽可能简单。

的 DEMO

解析数据到ng-model不起作用

1 个答案: